From 17c66908a62352f00b69f7fcdea1955ed4325b67 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 10:18:09 +0200
Subject: [PATCH 01/22] feat(alert-dialog): add rtl support

---
 apps/www/registry/default/ui/alert-dialog.tsx  | 4 ++--
 apps/www/registry/new-york/ui/alert-dialog.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/registry/default/ui/alert-dialog.tsx b/apps/www/registry/default/ui/alert-dialog.tsx
index 1b6f99493c9..d1703f2b900 100644
--- a/apps/www/registry/default/ui/alert-dialog.tsx
+++ b/apps/www/registry/default/ui/alert-dialog.tsx
@@ -51,7 +51,7 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-start",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",
       className
     )}
     {...props}
diff --git a/apps/www/registry/new-york/ui/alert-dialog.tsx b/apps/www/registry/new-york/ui/alert-dialog.tsx
index 13a807d5f18..216ddd6e7f8 100644
--- a/apps/www/registry/new-york/ui/alert-dialog.tsx
+++ b/apps/www/registry/new-york/ui/alert-dialog.tsx
@@ -51,7 +51,7 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-start",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",
       className
     )}
     {...props}

From c83be567a9cf5226aaff2ca301697d4be82bf036 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 10:21:43 +0200
Subject: [PATCH 02/22] feat(alert): add rtl support

---
 apps/www/registry/default/ui/alert.tsx  | 2 +-
 apps/www/registry/new-york/ui/alert.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/alert.tsx b/apps/www/registry/default/ui/alert.tsx
index 41fa7e0561a..8c6c5597cb4 100644
--- a/apps/www/registry/default/ui/alert.tsx
+++ b/apps/www/registry/default/ui/alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {
diff --git a/apps/www/registry/new-york/ui/alert.tsx b/apps/www/registry/new-york/ui/alert.tsx
index 5afd41d142c..5a0abb0bc0b 100644
--- a/apps/www/registry/new-york/ui/alert.tsx
+++ b/apps/www/registry/new-york/ui/alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7",
   {
     variants: {
       variant: {

From a25fa152e94eb0a638131c4cd60dec47fb62b0d1 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 11:18:38 +0200
Subject: [PATCH 03/22] feat(carousel): add rtl support

---
 apps/www/package.json                      |   3 +-
 apps/www/registry/default/ui/carousel.tsx  |  37 ++++-
 apps/www/registry/new-york/ui/carousel.tsx |  37 ++++-
 package.json                               |   2 +
 packages/cli/package.json                  |   2 +
 pnpm-lock.yaml                             | 170 ++++++++++-----------
 6 files changed, 151 insertions(+), 100 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 53529b19b79..77cf0799796 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.1.4",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-direction": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-hover-card": "^1.0.6",
     "@radix-ui/react-icons": "^1.3.0",
@@ -60,7 +61,7 @@
     "contentlayer2": "^0.4.6",
     "date-fns": "^2.30.0",
     "embla-carousel-autoplay": "8.0.0-rc15",
-    "embla-carousel-react": "8.0.0-rc15",
+    "embla-carousel-react": "8.0.1",
     "framer-motion": "^11.0.24",
     "geist": "^1.2.2",
     "input-otp": "^1.2.2",
diff --git a/apps/www/registry/default/ui/carousel.tsx b/apps/www/registry/default/ui/carousel.tsx
index 45311bfadf9..4fa7ff1482b 100644
--- a/apps/www/registry/default/ui/carousel.tsx
+++ b/apps/www/registry/default/ui/carousel.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useDirection } from "@radix-ui/react-direction"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
@@ -19,6 +20,7 @@ type CarouselProps = {
   plugins?: CarouselPlugin
   orientation?: "horizontal" | "vertical"
   setApi?: (api: CarouselApi) => void
+  direction: "ltr" | "rtl"
 }
 
 type CarouselContextProps = {
@@ -58,9 +60,11 @@ const Carousel = React.forwardRef<
     },
     ref
   ) => {
+    const dir = useDirection()
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
+        direction: dir,
         axis: orientation === "horizontal" ? "x" : "y",
       },
       plugins
@@ -132,6 +136,7 @@ const Carousel = React.forwardRef<
           scrollNext,
           canScrollPrev,
           canScrollNext,
+          direction: dir,
         }}
       >
         <div
@@ -198,7 +203,7 @@ const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev, direction } = useCarousel()
 
   return (
     <Button
@@ -208,7 +213,7 @@ const CarouselPrevious = React.forwardRef<
       className={cn(
         "absolute  h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+          ? "-start-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -216,7 +221,17 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft className="h-4 w-4" />
+      {orientation === "horizontal" ? (
+        <>
+          {direction === "rtl" ? (
+            <ArrowRight className="h-4 w-4" />
+          ) : (
+            <ArrowLeft className="h-4 w-4" />
+          )}
+        </>
+      ) : (
+        <ArrowLeft className="h-4 w-4" />
+      )}
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -227,7 +242,7 @@ const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext, direction } = useCarousel()
 
   return (
     <Button
@@ -237,7 +252,7 @@ const CarouselNext = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
+          ? "-end-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -245,7 +260,17 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight className="h-4 w-4" />
+      {orientation === "horizontal" ? (
+        <>
+          {direction === "rtl" ? (
+            <ArrowLeft className="h-4 w-4" />
+          ) : (
+            <ArrowRight className="h-4 w-4" />
+          )}
+        </>
+      ) : (
+        <ArrowRight className="h-4 w-4" />
+      )}
       <span className="sr-only">Next slide</span>
     </Button>
   )
diff --git a/apps/www/registry/new-york/ui/carousel.tsx b/apps/www/registry/new-york/ui/carousel.tsx
index 494acd23b7d..94c23c3912d 100644
--- a/apps/www/registry/new-york/ui/carousel.tsx
+++ b/apps/www/registry/new-york/ui/carousel.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useDirection } from "@radix-ui/react-direction"
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
@@ -19,6 +20,7 @@ type CarouselProps = {
   plugins?: CarouselPlugin
   orientation?: "horizontal" | "vertical"
   setApi?: (api: CarouselApi) => void
+  direction: "ltr" | "rtl"
 }
 
 type CarouselContextProps = {
@@ -58,10 +60,12 @@ const Carousel = React.forwardRef<
     },
     ref
   ) => {
+    const dir = useDirection()
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
+        direction: dir,
       },
       plugins
     )
@@ -132,6 +136,7 @@ const Carousel = React.forwardRef<
           scrollNext,
           canScrollPrev,
           canScrollNext,
+          direction: dir,
         }}
       >
         <div
@@ -198,7 +203,7 @@ const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev, direction } = useCarousel()
 
   return (
     <Button
@@ -208,7 +213,7 @@ const CarouselPrevious = React.forwardRef<
       className={cn(
         "absolute  h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+          ? "-start-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -216,7 +221,17 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon className="h-4 w-4" />
+      {orientation === "horizontal" ? (
+        <>
+          {direction === "rtl" ? (
+            <ArrowRightIcon className="h-4 w-4" />
+          ) : (
+            <ArrowLeftIcon className="h-4 w-4" />
+          )}
+        </>
+      ) : (
+        <ArrowLeftIcon className="h-4 w-4" />
+      )}
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -227,7 +242,7 @@ const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext, direction } = useCarousel()
 
   return (
     <Button
@@ -237,7 +252,7 @@ const CarouselNext = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
+          ? "-end-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -245,7 +260,17 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon className="h-4 w-4" />
+      {orientation === "horizontal" ? (
+        <>
+          {direction === "rtl" ? (
+            <ArrowLeftIcon className="h-4 w-4" />
+          ) : (
+            <ArrowRightIcon className="h-4 w-4" />
+          )}
+        </>
+      ) : (
+        <ArrowRightIcon className="h-4 w-4" />
+      )}
       <span className="sr-only">Next slide</span>
     </Button>
   )
diff --git a/package.json b/package.json
index 2e426be233b..6deacb76892 100644
--- a/package.json
+++ b/package.json
@@ -51,10 +51,12 @@
     "@commitlint/config-conventional": "^17.6.3",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
     "@manypkg/cli": "^0.20.0",
+    "@radix-ui/react-direction": "^1.1.0",
     "@typescript-eslint/parser": "^5.59.7",
     "autoprefixer": "^10.4.14",
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",
+    "embla-carousel-react": "8.0.1",
     "eslint": "^8.41.0",
     "eslint-config-next": "13.3.0",
     "eslint-config-prettier": "^8.8.0",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index d38aec15788..225d7eb6700 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -48,10 +48,12 @@
     "@babel/core": "^7.22.1",
     "@babel/parser": "^7.22.6",
     "@babel/plugin-transform-typescript": "^7.22.5",
+    "@radix-ui/react-direction": "^1.1.0",
     "chalk": "5.2.0",
     "commander": "^10.0.0",
     "cosmiconfig": "^8.1.3",
     "diff": "^5.1.0",
+    "embla-carousel-react": "8.0.1",
     "execa": "^7.0.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d47adebaf4..1b64a5ccce3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@manypkg/cli':
         specifier: ^0.20.0
         version: 0.20.0
+      '@radix-ui/react-direction':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react@18.2.67)(react@18.2.0)
       '@typescript-eslint/parser':
         specifier: ^5.59.7
         version: 5.61.0(eslint@8.44.0)(typescript@5.5.3)
@@ -41,6 +44,9 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
+      embla-carousel-react:
+        specifier: 8.0.1
+        version: 8.0.1(react@18.2.0)
       eslint:
         specifier: ^8.41.0
         version: 8.44.0
@@ -58,7 +64,7 @@ importers:
         version: 7.32.2(eslint@8.44.0)
       eslint-plugin-tailwindcss:
         specifier: 3.13.1
-        version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
+        version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)))
       postcss:
         specifier: ^8.4.24
         version: 8.4.24
@@ -70,10 +76,10 @@ importers:
         version: 3.1.3(prettier@2.8.8)
       tailwindcss:
         specifier: 3.3.7
-        version: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+        version: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
       tailwindcss-animate:
         specifier: ^1.0.5
-        version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
+        version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)))
       tsx:
         specifier: ^4.1.4
         version: 4.1.4
@@ -138,6 +144,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-direction':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react@18.2.67)(react@18.2.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.5
         version: 2.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -230,10 +239,10 @@ importers:
         version: 2.30.0
       embla-carousel-autoplay:
         specifier: 8.0.0-rc15
-        version: 8.0.0-rc15(embla-carousel@8.0.0-rc15)
+        version: 8.0.0-rc15(embla-carousel@8.0.1)
       embla-carousel-react:
-        specifier: 8.0.0-rc15
-        version: 8.0.0-rc15(react@18.2.0)
+        specifier: 8.0.1
+        version: 8.0.1(react@18.2.0)
       framer-motion:
         specifier: ^11.0.24
         version: 11.0.24(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -391,6 +400,9 @@ importers:
       '@babel/plugin-transform-typescript':
         specifier: ^7.22.5
         version: 7.22.5(@babel/core@7.22.1)
+      '@radix-ui/react-direction':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react@18.2.67)(react@18.2.0)
       chalk:
         specifier: 5.2.0
         version: 5.2.0
@@ -403,6 +415,9 @@ importers:
       diff:
         specifier: ^5.1.0
         version: 5.1.0
+      embla-carousel-react:
+        specifier: 8.0.1
+        version: 8.0.1(react@18.2.0)
       execa:
         specifier: ^7.0.0
         version: 7.0.0
@@ -587,10 +602,10 @@ importers:
         version: 0.288.0(react@18.2.0)
       next:
         specifier: 14.1.3
-        version: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       next-themes:
         specifier: ^0.2.1
-        version: 0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 0.2.1(next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2156,6 +2171,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.0.4':
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
@@ -3899,18 +3923,18 @@ packages:
     peerDependencies:
       embla-carousel: 8.0.0-rc15
 
-  embla-carousel-react@8.0.0-rc15:
-    resolution: {integrity: sha512-PePOkyPMWsUDNJKYRhUmGScYhex9mfpEiYiKT8OgwP/4K60plW0qk8cAXWvS9N61A/3RkUq7uz+hQsmhAtYMcA==}
+  embla-carousel-react@8.0.1:
+    resolution: {integrity: sha512-cpFQ/HwCsjBjzpu9Z9IHmZ9DaCSf/wo4q+qUTcRW3SsNv+1Q8IY7Y8J2QIyTmz0vOWY7tliu3uE2gqRH7ZDwOQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.1 || ^18.0.0
 
-  embla-carousel-reactive-utils@8.0.0-rc15:
-    resolution: {integrity: sha512-17Pr+N2vULFS8Lxzi2jaebwVloiFJLpdJMJLKJKQ26NzEmX8pVtHSu3uuTWc8HPwye5HFugqCPJ2QoWWhKs6Kg==}
+  embla-carousel-reactive-utils@8.0.1:
+    resolution: {integrity: sha512-KBSkz2h9LwVFkOrwzIJKgXbmEDlIShkreeOHnV8Cph09AdBMzb412nRkcctbeDcuG9x3CVsqLzJrSXnZeYhFPQ==}
     peerDependencies:
-      embla-carousel: 8.0.0-rc15
+      embla-carousel: 8.0.1
 
-  embla-carousel@8.0.0-rc15:
-    resolution: {integrity: sha512-s7VPexK2h8VEYjEVQFnJAPcRnY5YqJYicFxKVVyWXP3Hk9FFDkT0kqVxMM1PcL187qHOUgmGVHOrfC8xWy3OKQ==}
+  embla-carousel@8.0.1:
+    resolution: {integrity: sha512-RsaMRyBCd144N95gb3XoI+H9zj3RI4y0qcfvKYEh2tIAIEenL9CW9vwzltCeoYkWYipGdkvup+HGT9ewG1YTEw==}
 
   emoji-regex@10.3.0:
     resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
@@ -5891,10 +5915,6 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.4.41:
     resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -7738,12 +7758,12 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.5.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))(typescript@5.5.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))(typescript@5.5.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
       typescript: 5.5.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -8880,6 +8900,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.67
 
+  '@radix-ui/react-direction@1.1.0(@types/react@18.2.67)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.67
+
   '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.6
@@ -10443,11 +10469,11 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))(typescript@5.5.3):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))(typescript@5.5.3):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.5.3)
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
       typescript: 5.5.3
 
   cosmiconfig@8.1.3:
@@ -10696,21 +10722,21 @@ snapshots:
 
   electron-to-chromium@1.4.788: {}
 
-  embla-carousel-autoplay@8.0.0-rc15(embla-carousel@8.0.0-rc15):
+  embla-carousel-autoplay@8.0.0-rc15(embla-carousel@8.0.1):
     dependencies:
-      embla-carousel: 8.0.0-rc15
+      embla-carousel: 8.0.1
 
-  embla-carousel-react@8.0.0-rc15(react@18.2.0):
+  embla-carousel-react@8.0.1(react@18.2.0):
     dependencies:
-      embla-carousel: 8.0.0-rc15
-      embla-carousel-reactive-utils: 8.0.0-rc15(embla-carousel@8.0.0-rc15)
+      embla-carousel: 8.0.1
+      embla-carousel-reactive-utils: 8.0.1(embla-carousel@8.0.1)
       react: 18.2.0
 
-  embla-carousel-reactive-utils@8.0.0-rc15(embla-carousel@8.0.0-rc15):
+  embla-carousel-reactive-utils@8.0.1(embla-carousel@8.0.1):
     dependencies:
-      embla-carousel: 8.0.0-rc15
+      embla-carousel: 8.0.1
 
-  embla-carousel@8.0.0-rc15: {}
+  embla-carousel@8.0.1: {}
 
   emoji-regex@10.3.0: {}
 
@@ -11121,11 +11147,11 @@ snapshots:
       postcss: 8.4.41
       tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
 
-  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
+  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.41
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
 
   eslint-plugin-turbo@1.9.9(eslint@8.44.0):
     dependencies:
@@ -13061,9 +13087,9 @@ snapshots:
       - markdown-wasm
       - supports-color
 
-  next-themes@0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.2.1(next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      next: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next: 14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
@@ -13073,7 +13099,7 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 14.1.3
       '@swc/helpers': 0.5.2
@@ -13083,7 +13109,7 @@ snapshots:
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.24.6)(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.22.1)(react@18.2.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.1.3
       '@next/swc-darwin-x64': 14.1.3
@@ -13391,13 +13417,6 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
   postcss-import@15.1.0(postcss@8.4.41):
     dependencies:
       postcss: 8.4.41
@@ -13405,11 +13424,6 @@ snapshots:
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.38):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.38
-
   postcss-js@4.0.1(postcss@8.4.41):
     dependencies:
       camelcase-css: 2.0.1
@@ -13423,26 +13437,21 @@ snapshots:
       postcss: 8.4.41
       ts-node: 10.9.2(@types/node@20.14.0)(typescript@4.9.5)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
+  postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
-      postcss: 8.4.38
+      postcss: 8.4.41
       ts-node: 10.9.2(@types/node@17.0.45)(typescript@5.5.3)
 
-  postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
+  postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.41
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
-
-  postcss-nested@6.0.1(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.0
+      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
 
   postcss-nested@6.0.1(postcss@8.4.41):
     dependencies:
@@ -13468,12 +13477,6 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
-  postcss@8.4.38:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
   postcss@8.4.41:
     dependencies:
       nanoid: 3.3.7
@@ -14315,13 +14318,6 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.22.1
 
-  styled-jsx@5.1.1(@babel/core@7.24.6)(react@18.2.0):
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-    optionalDependencies:
-      '@babel/core': 7.24.6
-
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -14357,9 +14353,9 @@ snapshots:
     dependencies:
       tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
 
-  tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
+  tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))):
     dependencies:
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
 
   tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
     dependencies:
@@ -14377,18 +14373,18 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 15.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
-      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss: 8.4.41
+      postcss-import: 15.1.0(postcss@8.4.41)
+      postcss-js: 4.0.1(postcss@8.4.41)
+      postcss-load-config: 4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
+      postcss-nested: 6.0.1(postcss@8.4.41)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
+  tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -14407,7 +14403,7 @@ snapshots:
       postcss: 8.4.41
       postcss-import: 15.1.0(postcss@8.4.41)
       postcss-js: 4.0.1(postcss@8.4.41)
-      postcss-load-config: 4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
+      postcss-load-config: 4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
       postcss-nested: 6.0.1(postcss@8.4.41)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -14538,42 +14534,42 @@ snapshots:
       yn: 3.1.1
     optional: true
 
-  ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3):
+  ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.11.27
+      '@types/node': 20.14.0
       acorn: 8.11.3
       acorn-walk: 8.3.2
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.5.3
+      typescript: 4.9.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optional: true
 
-  ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5):
+  ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.14.0
+      '@types/node': 20.5.1
       acorn: 8.11.3
       acorn-walk: 8.3.2
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 5.5.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    optional: true
 
   ts-pattern@5.2.0: {}
 

From cbe3c2ced60f0b2b1c26017729c6a8ea95b629b9 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 14:13:56 +0200
Subject: [PATCH 04/22] feat(command): add rtl support

---
 apps/www/registry/default/ui/command.tsx  | 4 ++--
 apps/www/registry/new-york/ui/command.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/registry/default/ui/command.tsx b/apps/www/registry/default/ui/command.tsx
index 81549949632..1152a5976b1 100644
--- a/apps/www/registry/default/ui/command.tsx
+++ b/apps/www/registry/default/ui/command.tsx
@@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search className="me-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -133,7 +133,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
diff --git a/apps/www/registry/new-york/ui/command.tsx b/apps/www/registry/new-york/ui/command.tsx
index e9de195b0ab..294ec3315e2 100644
--- a/apps/www/registry/new-york/ui/command.tsx
+++ b/apps/www/registry/new-york/ui/command.tsx
@@ -133,7 +133,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}

From 3233e39d0913b568fc21894283692c0ecd254023 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 23:35:07 +0200
Subject: [PATCH 05/22] feat(context-menu): add rtl support

---
 apps/www/registry/default/ui/context-menu.tsx | 52 +++++++++++--------
 .../www/registry/new-york/ui/context-menu.tsx | 51 ++++++++++--------
 2 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/apps/www/registry/default/ui/context-menu.tsx b/apps/www/registry/default/ui/context-menu.tsx
index 93ef37ba98d..3dfeb09c4eb 100644
--- a/apps/www/registry/default/ui/context-menu.tsx
+++ b/apps/www/registry/default/ui/context-menu.tsx
@@ -2,7 +2,8 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { useDirection } from "@radix-ui/react-direction"
+import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -23,20 +24,27 @@ const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
+>(({ className, inset, children, ...props }, ref) => {
+  const dir = useDirection()
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {dir === "rtl" ? (
+        <ChevronLeft className="ms-auto h-4 w-4" />
+      ) : (
+        <ChevronRight className="ms-auto h-4 w-4" />
+      )}
+    </ContextMenuPrimitive.SubTrigger>
+  )
+})
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
@@ -81,7 +89,7 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -96,13 +104,13 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -120,12 +128,12 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -145,7 +153,7 @@ const ContextMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -172,7 +180,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
diff --git a/apps/www/registry/new-york/ui/context-menu.tsx b/apps/www/registry/new-york/ui/context-menu.tsx
index 654810acec0..9c1e856d314 100644
--- a/apps/www/registry/new-york/ui/context-menu.tsx
+++ b/apps/www/registry/new-york/ui/context-menu.tsx
@@ -2,8 +2,10 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { useDirection } from "@radix-ui/react-direction"
 import {
   CheckIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons"
@@ -27,20 +29,27 @@ const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
+>(({ className, inset, children, ...props }, ref) => {
+  const dir = useDirection()
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {dir === "rtl" ? (
+        <ChevronLeftIcon className="ms-auto h-4 w-4" />
+      ) : (
+        <ChevronRightIcon className="ms-auto h-4 w-4" />
+      )}
+    </ContextMenuPrimitive.SubTrigger>
+  )
+})
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
@@ -85,7 +94,7 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -100,13 +109,13 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <CheckIcon className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -124,12 +133,12 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <DotFilledIcon className="h-4 w-4 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -149,7 +158,7 @@ const ContextMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -176,7 +185,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}

From 527da48cbb79955bd41df025203b07a84955ac7c Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 23:46:01 +0200
Subject: [PATCH 06/22] feat(dialog): add rtl support

---
 apps/www/registry/default/ui/dialog.tsx  | 6 +++---
 apps/www/registry/new-york/ui/dialog.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/www/registry/default/ui/dialog.tsx b/apps/www/registry/default/ui/dialog.tsx
index 01ff19c7e45..00e92a62411 100644
--- a/apps/www/registry/default/ui/dialog.tsx
+++ b/apps/www/registry/default/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -59,7 +59,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-start",
       className
     )}
     {...props}
@@ -73,7 +73,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",
       className
     )}
     {...props}
diff --git a/apps/www/registry/new-york/ui/dialog.tsx b/apps/www/registry/new-york/ui/dialog.tsx
index 95b0d38ac04..d46876d81b7 100644
--- a/apps/www/registry/new-york/ui/dialog.tsx
+++ b/apps/www/registry/new-york/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -59,7 +59,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-start",
       className
     )}
     {...props}
@@ -73,7 +73,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",
       className
     )}
     {...props}

From 401a47030f1c6d80176d942da0290d501424be87 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Wed, 11 Sep 2024 23:48:41 +0200
Subject: [PATCH 07/22] feat(drawer): add rtl support

---
 apps/www/registry/default/ui/drawer.tsx  | 2 +-
 apps/www/registry/new-york/ui/drawer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/drawer.tsx b/apps/www/registry/default/ui/drawer.tsx
index 6a0ef53dde8..1b3c70573c9 100644
--- a/apps/www/registry/default/ui/drawer.tsx
+++ b/apps/www/registry/default/ui/drawer.tsx
@@ -60,7 +60,7 @@ const DrawerHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
     {...props}
   />
 )
diff --git a/apps/www/registry/new-york/ui/drawer.tsx b/apps/www/registry/new-york/ui/drawer.tsx
index 6a0ef53dde8..1b3c70573c9 100644
--- a/apps/www/registry/new-york/ui/drawer.tsx
+++ b/apps/www/registry/new-york/ui/drawer.tsx
@@ -60,7 +60,7 @@ const DrawerHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
     {...props}
   />
 )

From 6ae9bee554e0f7a4939a3767dbe85ea30e65b62a Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Thu, 12 Sep 2024 00:03:18 +0200
Subject: [PATCH 08/22] feat(dropdown-menu): add rtl support

---
 .../www/registry/default/ui/dropdown-menu.tsx | 52 +++++++++++--------
 .../registry/new-york/ui/dropdown-menu.tsx    | 51 ++++++++++--------
 2 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/apps/www/registry/default/ui/dropdown-menu.tsx b/apps/www/registry/default/ui/dropdown-menu.tsx
index f69a0d64caf..6f307dd3d14 100644
--- a/apps/www/registry/default/ui/dropdown-menu.tsx
+++ b/apps/www/registry/default/ui/dropdown-menu.tsx
@@ -2,9 +2,10 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useDirection } from "@radix-ui/react-direction"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -23,20 +24,27 @@ const DropdownMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
+>(({ className, inset, children, ...props }, ref) => {
+  const dir = useDirection()
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {dir === "rtl" ? (
+        <ChevronLeft className="ms-auto h-4 w-4" />
+      ) : (
+        <ChevronRight className="ms-auto h-4 w-4" />
+      )}
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+})
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
@@ -84,7 +92,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -99,13 +107,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -123,12 +131,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -148,7 +156,7 @@ const DropdownMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -174,7 +182,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("ms-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   )
diff --git a/apps/www/registry/new-york/ui/dropdown-menu.tsx b/apps/www/registry/new-york/ui/dropdown-menu.tsx
index 242b07a63dd..bbc2b13671b 100644
--- a/apps/www/registry/new-york/ui/dropdown-menu.tsx
+++ b/apps/www/registry/new-york/ui/dropdown-menu.tsx
@@ -1,9 +1,11 @@
 "use client"
 
 import * as React from "react"
+import { useDirection } from "@radix-ui/react-direction"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import {
   CheckIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons"
@@ -27,20 +29,27 @@ const DropdownMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
+>(({ className, inset, children, ...props }, ref) => {
+  const dir = useDirection()
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {dir === "rtl" ? (
+        <ChevronLeftIcon className="ms-auto h-4 w-4" />
+      ) : (
+        <ChevronRightIcon className="ms-auto h-4 w-4" />
+      )}
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+})
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
@@ -89,7 +98,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -104,13 +113,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <CheckIcon className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -128,12 +137,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <DotFilledIcon className="h-4 w-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -153,7 +162,7 @@ const DropdownMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -179,7 +188,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("ms-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   )

From de6fe31d374ddab80824e671d1880f3a3ca856f9 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Thu, 12 Sep 2024 10:09:22 +0200
Subject: [PATCH 09/22] feat(menubar): add rtl support

---
 apps/www/registry/default/ui/menubar.tsx  | 54 +++++++++++++----------
 apps/www/registry/new-york/ui/menubar.tsx | 53 +++++++++++++---------
 2 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/apps/www/registry/default/ui/menubar.tsx b/apps/www/registry/default/ui/menubar.tsx
index 5586fa9b21f..08e675cc8bb 100644
--- a/apps/www/registry/default/ui/menubar.tsx
+++ b/apps/www/registry/default/ui/menubar.tsx
@@ -2,9 +2,10 @@
 
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useDirection } from "@radix-ui/react-direction"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -23,7 +24,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      "flex h-10 items-center space-x-1 rtl:space-x-reverse rounded-md border bg-background p-1",
       className
     )}
     {...props}
@@ -51,20 +52,27 @@ const MenubarSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
+>(({ className, inset, children, ...props }, ref) => {
+  const dir = useDirection()
+  return (
+    <MenubarPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {dir === "rtl" ? (
+        <ChevronLeft className="ms-auto h-4 w-4" />
+      ) : (
+        <ChevronRight className="ms-auto h-4 w-4" />
+      )}
+    </MenubarPrimitive.SubTrigger>
+  )
+})
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 
 const MenubarSubContent = React.forwardRef<
@@ -117,7 +125,7 @@ const MenubarItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -132,13 +140,13 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
@@ -155,12 +163,12 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </MenubarPrimitive.ItemIndicator>
@@ -180,7 +188,7 @@ const MenubarLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -207,7 +215,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
diff --git a/apps/www/registry/new-york/ui/menubar.tsx b/apps/www/registry/new-york/ui/menubar.tsx
index 010145cd02e..7199d380c8b 100644
--- a/apps/www/registry/new-york/ui/menubar.tsx
+++ b/apps/www/registry/new-york/ui/menubar.tsx
@@ -7,8 +7,10 @@ import {
   DotFilledIcon,
 } from "@radix-ui/react-icons"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { ChevronLeftIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useDirection } from "@radix-ui/react-direction"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -27,7 +29,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      "flex h-9 items-center space-x-1 rtl:space-x-reverse rounded-md border bg-background p-1 shadow-sm",
       className
     )}
     {...props}
@@ -55,20 +57,27 @@ const MenubarSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
+>(({ className, inset, children, ...props }, ref) => {
+  const dir = useDirection()
+  return (
+    <MenubarPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "ps-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {dir === "rtl" ? (
+        <ChevronLeftIcon className="ms-auto h-4 w-4" />
+      ) : (
+        <ChevronRightIcon className="ms-auto h-4 w-4" />
+      )}{" "}
+    </MenubarPrimitive.SubTrigger>
+  )
+})
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 
 const MenubarSubContent = React.forwardRef<
@@ -121,7 +130,7 @@ const MenubarItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -136,13 +145,13 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <CheckIcon className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
@@ -159,12 +168,12 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
         <DotFilledIcon className="h-4 w-4 fill-current" />
       </MenubarPrimitive.ItemIndicator>
@@ -184,7 +193,7 @@ const MenubarLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className
     )}
     {...props}
@@ -211,7 +220,7 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}

From e8cfcaf05d612ad2b02b5e5a1baec518ccec4b9b Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Sun, 15 Sep 2024 23:19:13 +0200
Subject: [PATCH 10/22] feat(navigation-menu): add rtl support

---
 apps/www/registry/default/ui/navigation-menu.tsx  | 8 ++++----
 apps/www/registry/new-york/ui/navigation-menu.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/www/registry/default/ui/navigation-menu.tsx b/apps/www/registry/default/ui/navigation-menu.tsx
index 1419f56695b..cd134573407 100644
--- a/apps/www/registry/default/ui/navigation-menu.tsx
+++ b/apps/www/registry/default/ui/navigation-menu.tsx
@@ -30,7 +30,7 @@ const NavigationMenuList = React.forwardRef<
   <NavigationMenuPrimitive.List
     ref={ref}
     className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
+      "group flex flex-1 list-none items-center justify-center space-x-1 rtl:space-x-reverse",
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{" "}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ms-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "start-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
       className
     )}
     {...props}
@@ -83,7 +83,7 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
+  <div className={cn("absolute start-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
diff --git a/apps/www/registry/new-york/ui/navigation-menu.tsx b/apps/www/registry/new-york/ui/navigation-menu.tsx
index 5841fb39856..96dacb46dbb 100644
--- a/apps/www/registry/new-york/ui/navigation-menu.tsx
+++ b/apps/www/registry/new-york/ui/navigation-menu.tsx
@@ -30,7 +30,7 @@ const NavigationMenuList = React.forwardRef<
   <NavigationMenuPrimitive.List
     ref={ref}
     className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
+      "group flex flex-1 list-none items-center justify-center space-x-1 rtl:space-x-reverse",
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{" "}
     <ChevronDownIcon
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ms-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "start-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
       className
     )}
     {...props}
@@ -83,7 +83,7 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
+  <div className={cn("absolute start-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",

From ef749631daec0136d5f5e81cbb2c1845ec03b729 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Sun, 15 Sep 2024 23:25:46 +0200
Subject: [PATCH 11/22] feat(pagination): add rtl support

---
 apps/www/registry/default/ui/pagination.tsx  | 8 ++++----
 apps/www/registry/new-york/ui/pagination.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/www/registry/default/ui/pagination.tsx b/apps/www/registry/default/ui/pagination.tsx
index ea2d4df8143..dde56f81a65 100644
--- a/apps/www/registry/default/ui/pagination.tsx
+++ b/apps/www/registry/default/ui/pagination.tsx
@@ -66,10 +66,10 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("gap-1 ps-2.5", className)}
     {...props}
   >
-    <ChevronLeft className="h-4 w-4" />
+    <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
     <span>Previous</span>
   </PaginationLink>
 )
@@ -82,11 +82,11 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("gap-1 pe-2.5", className)}
     {...props}
   >
     <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
+    <ChevronRight className="h-4 w-4 rtl:rotate-180" />
   </PaginationLink>
 )
 PaginationNext.displayName = "PaginationNext"
diff --git a/apps/www/registry/new-york/ui/pagination.tsx b/apps/www/registry/new-york/ui/pagination.tsx
index d64bde8fb07..98007086bf3 100644
--- a/apps/www/registry/new-york/ui/pagination.tsx
+++ b/apps/www/registry/new-york/ui/pagination.tsx
@@ -70,10 +70,10 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("gap-1 ps-2.5", className)}
     {...props}
   >
-    <ChevronLeftIcon className="h-4 w-4" />
+    <ChevronLeftIcon className="h-4 w-4 rtl:rotate-180" />
     <span>Previous</span>
   </PaginationLink>
 )
@@ -86,11 +86,11 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("gap-1 pe-2.5", className)}
     {...props}
   >
     <span>Next</span>
-    <ChevronRightIcon className="h-4 w-4" />
+    <ChevronRightIcon className="h-4 w-4 rtl:rotate-180" />
   </PaginationLink>
 )
 PaginationNext.displayName = "PaginationNext"

From 48a1122322b84de2479e84dfcc8e2080d191e4bb Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Sun, 15 Sep 2024 23:42:53 +0200
Subject: [PATCH 12/22] refactor: use tailwind rtl and rotate to rotate
 chevrons instead of using the useDirection context

---
 apps/www/registry/default/ui/carousel.tsx     | 20 ++--------
 apps/www/registry/default/ui/context-menu.tsx | 38 ++++++++-----------
 .../www/registry/default/ui/dropdown-menu.tsx | 38 ++++++++-----------
 apps/www/registry/default/ui/menubar.tsx      | 38 ++++++++-----------
 apps/www/registry/new-york/ui/carousel.tsx    | 20 ++--------
 .../www/registry/new-york/ui/context-menu.tsx | 37 +++++++-----------
 .../registry/new-york/ui/dropdown-menu.tsx    | 36 +++++++-----------
 apps/www/registry/new-york/ui/menubar.tsx     | 37 +++++++-----------
 8 files changed, 95 insertions(+), 169 deletions(-)

diff --git a/apps/www/registry/default/ui/carousel.tsx b/apps/www/registry/default/ui/carousel.tsx
index 4fa7ff1482b..fc0a3502d92 100644
--- a/apps/www/registry/default/ui/carousel.tsx
+++ b/apps/www/registry/default/ui/carousel.tsx
@@ -203,7 +203,7 @@ const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev, direction } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
@@ -222,13 +222,7 @@ const CarouselPrevious = React.forwardRef<
       {...props}
     >
       {orientation === "horizontal" ? (
-        <>
-          {direction === "rtl" ? (
-            <ArrowRight className="h-4 w-4" />
-          ) : (
-            <ArrowLeft className="h-4 w-4" />
-          )}
-        </>
+        <ArrowLeft className="h-4 w-4 rtl:rotate-180" />
       ) : (
         <ArrowLeft className="h-4 w-4" />
       )}
@@ -242,7 +236,7 @@ const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext, direction } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
@@ -261,13 +255,7 @@ const CarouselNext = React.forwardRef<
       {...props}
     >
       {orientation === "horizontal" ? (
-        <>
-          {direction === "rtl" ? (
-            <ArrowLeft className="h-4 w-4" />
-          ) : (
-            <ArrowRight className="h-4 w-4" />
-          )}
-        </>
+        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
       ) : (
         <ArrowRight className="h-4 w-4" />
       )}
diff --git a/apps/www/registry/default/ui/context-menu.tsx b/apps/www/registry/default/ui/context-menu.tsx
index 3dfeb09c4eb..ffa49aeca04 100644
--- a/apps/www/registry/default/ui/context-menu.tsx
+++ b/apps/www/registry/default/ui/context-menu.tsx
@@ -2,8 +2,7 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { useDirection } from "@radix-ui/react-direction"
-import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -24,27 +23,20 @@ const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => {
-  const dir = useDirection()
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        inset && "ps-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {dir === "rtl" ? (
-        <ChevronLeft className="ms-auto h-4 w-4" />
-      ) : (
-        <ChevronRight className="ms-auto h-4 w-4" />
-      )}
-    </ContextMenuPrimitive.SubTrigger>
-  )
-})
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "ps-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </ContextMenuPrimitive.SubTrigger>
+))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
diff --git a/apps/www/registry/default/ui/dropdown-menu.tsx b/apps/www/registry/default/ui/dropdown-menu.tsx
index 6f307dd3d14..8e65baa004c 100644
--- a/apps/www/registry/default/ui/dropdown-menu.tsx
+++ b/apps/www/registry/default/ui/dropdown-menu.tsx
@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { useDirection } from "@radix-ui/react-direction"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -24,27 +23,20 @@ const DropdownMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => {
-  const dir = useDirection()
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-        inset && "ps-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {dir === "rtl" ? (
-        <ChevronLeft className="ms-auto h-4 w-4" />
-      ) : (
-        <ChevronRight className="ms-auto h-4 w-4" />
-      )}
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-})
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "ps-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
diff --git a/apps/www/registry/default/ui/menubar.tsx b/apps/www/registry/default/ui/menubar.tsx
index 08e675cc8bb..d061e9fa072 100644
--- a/apps/www/registry/default/ui/menubar.tsx
+++ b/apps/www/registry/default/ui/menubar.tsx
@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronLeft, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { useDirection } from "@radix-ui/react-direction"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -52,27 +51,20 @@ const MenubarSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => {
-  const dir = useDirection()
-  return (
-    <MenubarPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        inset && "ps-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {dir === "rtl" ? (
-        <ChevronLeft className="ms-auto h-4 w-4" />
-      ) : (
-        <ChevronRight className="ms-auto h-4 w-4" />
-      )}
-    </MenubarPrimitive.SubTrigger>
-  )
-})
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "ps-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </MenubarPrimitive.SubTrigger>
+))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 
 const MenubarSubContent = React.forwardRef<
diff --git a/apps/www/registry/new-york/ui/carousel.tsx b/apps/www/registry/new-york/ui/carousel.tsx
index 94c23c3912d..85229d2a4b1 100644
--- a/apps/www/registry/new-york/ui/carousel.tsx
+++ b/apps/www/registry/new-york/ui/carousel.tsx
@@ -203,7 +203,7 @@ const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev, direction } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
@@ -222,13 +222,7 @@ const CarouselPrevious = React.forwardRef<
       {...props}
     >
       {orientation === "horizontal" ? (
-        <>
-          {direction === "rtl" ? (
-            <ArrowRightIcon className="h-4 w-4" />
-          ) : (
-            <ArrowLeftIcon className="h-4 w-4" />
-          )}
-        </>
+        <ArrowLeftIcon className="h-4 w-4 rtl:rotate-180" />
       ) : (
         <ArrowLeftIcon className="h-4 w-4" />
       )}
@@ -242,7 +236,7 @@ const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext, direction } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
@@ -261,13 +255,7 @@ const CarouselNext = React.forwardRef<
       {...props}
     >
       {orientation === "horizontal" ? (
-        <>
-          {direction === "rtl" ? (
-            <ArrowLeftIcon className="h-4 w-4" />
-          ) : (
-            <ArrowRightIcon className="h-4 w-4" />
-          )}
-        </>
+        <ArrowRightIcon className="h-4 w-4 rtl:rotate-180" />
       ) : (
         <ArrowRightIcon className="h-4 w-4" />
       )}
diff --git a/apps/www/registry/new-york/ui/context-menu.tsx b/apps/www/registry/new-york/ui/context-menu.tsx
index 9c1e856d314..90a54b8ca1d 100644
--- a/apps/www/registry/new-york/ui/context-menu.tsx
+++ b/apps/www/registry/new-york/ui/context-menu.tsx
@@ -2,10 +2,8 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { useDirection } from "@radix-ui/react-direction"
 import {
   CheckIcon,
-  ChevronLeftIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons"
@@ -29,27 +27,20 @@ const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => {
-  const dir = useDirection()
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        inset && "ps-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {dir === "rtl" ? (
-        <ChevronLeftIcon className="ms-auto h-4 w-4" />
-      ) : (
-        <ChevronRightIcon className="ms-auto h-4 w-4" />
-      )}
-    </ContextMenuPrimitive.SubTrigger>
-  )
-})
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "ps-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </ContextMenuPrimitive.SubTrigger>
+))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
diff --git a/apps/www/registry/new-york/ui/dropdown-menu.tsx b/apps/www/registry/new-york/ui/dropdown-menu.tsx
index bbc2b13671b..73a5a92c00a 100644
--- a/apps/www/registry/new-york/ui/dropdown-menu.tsx
+++ b/apps/www/registry/new-york/ui/dropdown-menu.tsx
@@ -5,7 +5,6 @@ import { useDirection } from "@radix-ui/react-direction"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import {
   CheckIcon,
-  ChevronLeftIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from "@radix-ui/react-icons"
@@ -29,27 +28,20 @@ const DropdownMenuSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => {
-  const dir = useDirection()
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-        inset && "ps-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {dir === "rtl" ? (
-        <ChevronLeftIcon className="ms-auto h-4 w-4" />
-      ) : (
-        <ChevronRightIcon className="ms-auto h-4 w-4" />
-      )}
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-})
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "ps-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
diff --git a/apps/www/registry/new-york/ui/menubar.tsx b/apps/www/registry/new-york/ui/menubar.tsx
index 7199d380c8b..5706b2bb807 100644
--- a/apps/www/registry/new-york/ui/menubar.tsx
+++ b/apps/www/registry/new-york/ui/menubar.tsx
@@ -7,10 +7,8 @@ import {
   DotFilledIcon,
 } from "@radix-ui/react-icons"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { ChevronLeftIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { useDirection } from "@radix-ui/react-direction"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -57,27 +55,20 @@ const MenubarSubTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
     inset?: boolean
   }
->(({ className, inset, children, ...props }, ref) => {
-  const dir = useDirection()
-  return (
-    <MenubarPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-        inset && "ps-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {dir === "rtl" ? (
-        <ChevronLeftIcon className="ms-auto h-4 w-4" />
-      ) : (
-        <ChevronRightIcon className="ms-auto h-4 w-4" />
-      )}{" "}
-    </MenubarPrimitive.SubTrigger>
-  )
-})
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "ps-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </MenubarPrimitive.SubTrigger>
+))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 
 const MenubarSubContent = React.forwardRef<

From f8aef7f23983417bb53584cd98cb1e0c71ef748f Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Sun, 15 Sep 2024 23:45:14 +0200
Subject: [PATCH 13/22] feat(carousel): improve rtl support

---
 apps/www/registry/default/ui/carousel.tsx  | 4 ++--
 apps/www/registry/new-york/ui/carousel.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/registry/default/ui/carousel.tsx b/apps/www/registry/default/ui/carousel.tsx
index fc0a3502d92..badba3074bb 100644
--- a/apps/www/registry/default/ui/carousel.tsx
+++ b/apps/www/registry/default/ui/carousel.tsx
@@ -167,7 +167,7 @@ const CarouselContent = React.forwardRef<
         ref={ref}
         className={cn(
           "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
           className
         )}
         {...props}
@@ -190,7 +190,7 @@ const CarouselItem = React.forwardRef<
       aria-roledescription="slide"
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        orientation === "horizontal" ? "ps-4" : "pt-4",
         className
       )}
       {...props}
diff --git a/apps/www/registry/new-york/ui/carousel.tsx b/apps/www/registry/new-york/ui/carousel.tsx
index 85229d2a4b1..2502ced5a8b 100644
--- a/apps/www/registry/new-york/ui/carousel.tsx
+++ b/apps/www/registry/new-york/ui/carousel.tsx
@@ -167,7 +167,7 @@ const CarouselContent = React.forwardRef<
         ref={ref}
         className={cn(
           "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
           className
         )}
         {...props}
@@ -190,7 +190,7 @@ const CarouselItem = React.forwardRef<
       aria-roledescription="slide"
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        orientation === "horizontal" ? "ps-4" : "pt-4",
         className
       )}
       {...props}

From 6d2a66eccfb644cea0c4ee241eaff2a07e25a959 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Mon, 16 Sep 2024 00:03:44 +0200
Subject: [PATCH 14/22] feat(select): add rtl support

---
 apps/www/registry/default/ui/select.tsx  | 6 +++---
 apps/www/registry/new-york/ui/select.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/www/registry/default/ui/select.tsx b/apps/www/registry/default/ui/select.tsx
index cbe5a36b695..c6b7aa63526 100644
--- a/apps/www/registry/default/ui/select.tsx
+++ b/apps/www/registry/default/ui/select.tsx
@@ -105,7 +105,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 ps-8 pe-2 text-sm font-semibold", className)}
     {...props}
   />
 ))
@@ -118,12 +118,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
diff --git a/apps/www/registry/new-york/ui/select.tsx b/apps/www/registry/new-york/ui/select.tsx
index ac2a8f2b9c7..7778b7ba3f6 100644
--- a/apps/www/registry/new-york/ui/select.tsx
+++ b/apps/www/registry/new-york/ui/select.tsx
@@ -123,12 +123,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute end-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <CheckIcon className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>

From 8550e656820ea6dc58e726b557a68ae78f5aa0b4 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Thu, 3 Oct 2024 16:54:27 +0200
Subject: [PATCH 15/22] feat(sheet): add rtl support

---
 apps/www/registry/default/ui/sheet.tsx  | 6 +++---
 apps/www/registry/new-york/ui/sheet.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/www/registry/default/ui/sheet.tsx b/apps/www/registry/default/ui/sheet.tsx
index a37f17ba040..51749c5765e 100644
--- a/apps/www/registry/default/ui/sheet.tsx
+++ b/apps/www/registry/default/ui/sheet.tsx
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -80,7 +80,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-start",
       className
     )}
     {...props}
@@ -94,7 +94,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",
       className
     )}
     {...props}
diff --git a/apps/www/registry/new-york/ui/sheet.tsx b/apps/www/registry/new-york/ui/sheet.tsx
index 417e7e10a73..57ef292c240 100644
--- a/apps/www/registry/new-york/ui/sheet.tsx
+++ b/apps/www/registry/new-york/ui/sheet.tsx
@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -80,7 +80,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-start",
       className
     )}
     {...props}
@@ -94,7 +94,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse",
       className
     )}
     {...props}

From f18ccc1bab0b80ff20c77baf973d0ade29178a57 Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Thu, 3 Oct 2024 17:20:52 +0200
Subject: [PATCH 16/22] feat(switch): add rtl support

---
 apps/www/registry/default/ui/switch.tsx  | 4 ++--
 apps/www/registry/new-york/ui/switch.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/registry/default/ui/switch.tsx b/apps/www/registry/default/ui/switch.tsx
index bc69cf2dbfc..d04684dd067 100644
--- a/apps/www/registry/default/ui/switch.tsx
+++ b/apps/www/registry/default/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex rtl:flex-row-reverse h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:translate-x-0 rtl:data-[state=unchecked]:translate-x-5"
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/apps/www/registry/new-york/ui/switch.tsx b/apps/www/registry/new-york/ui/switch.tsx
index 5f4117f0f24..6e8b98c0b8b 100644
--- a/apps/www/registry/new-york/ui/switch.tsx
+++ b/apps/www/registry/new-york/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex rtl:flex-row-reverse h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:translate-x-0 rtl:data-[state=unchecked]:translate-x-4"
       )}
     />
   </SwitchPrimitives.Root>

From a44116313cc1af2b39b6f7e3079649a7ee35f63c Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Thu, 3 Oct 2024 17:24:14 +0200
Subject: [PATCH 17/22] feat(table): add rtl support

---
 apps/www/registry/default/ui/table.tsx  | 4 ++--
 apps/www/registry/new-york/ui/table.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/registry/default/ui/table.tsx b/apps/www/registry/default/ui/table.tsx
index 7f3502f8b28..8296147ac55 100644
--- a/apps/www/registry/default/ui/table.tsx
+++ b/apps/www/registry/default/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
       className
     )}
     {...props}
@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
     {...props}
   />
 ))
diff --git a/apps/www/registry/new-york/ui/table.tsx b/apps/www/registry/new-york/ui/table.tsx
index c0df655c0bf..d3df5255d99 100644
--- a/apps/www/registry/new-york/ui/table.tsx
+++ b/apps/www/registry/new-york/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "h-10 px-2 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "p-2 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}

From d3ba573c10dddf1d9c16ac5b3fe94bb9a844e0b6 Mon Sep 17 00:00:00 2001
From: jjeem <alkheder.jad@gmail.com>
Date: Wed, 27 Nov 2024 21:37:27 +0300
Subject: [PATCH 18/22] feat(breadcrumb): add rtl support

---
 apps/www/registry/default/ui/breadcrumb.tsx  | 2 +-
 apps/www/registry/new-york/ui/breadcrumb.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/breadcrumb.tsx b/apps/www/registry/default/ui/breadcrumb.tsx
index 71a5c325cdc..a612fc90e93 100644
--- a/apps/www/registry/default/ui/breadcrumb.tsx
+++ b/apps/www/registry/default/ui/breadcrumb.tsx
@@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRight />}
+    {children ?? <ChevronRight className="rtl:rotate-180" />}
   </li>
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
diff --git a/apps/www/registry/new-york/ui/breadcrumb.tsx b/apps/www/registry/new-york/ui/breadcrumb.tsx
index 26560efcc48..49adbc300d3 100644
--- a/apps/www/registry/new-york/ui/breadcrumb.tsx
+++ b/apps/www/registry/new-york/ui/breadcrumb.tsx
@@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRightIcon />}
+    {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
   </li>
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

From 14ba98c4bff2b2bf59e9485e349e3333bae79ad3 Mon Sep 17 00:00:00 2001
From: jjeem <alkheder.jad@gmail.com>
Date: Wed, 27 Nov 2024 22:10:30 +0300
Subject: [PATCH 19/22] feat(input-otp): add rtl support

---
 apps/www/registry/default/ui/input-otp.tsx  | 4 ++--
 apps/www/registry/new-york/ui/input-otp.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/www/registry/default/ui/input-otp.tsx b/apps/www/registry/default/ui/input-otp.tsx
index f66fcfa0ddb..026665f3354 100644
--- a/apps/www/registry/default/ui/input-otp.tsx
+++ b/apps/www/registry/default/ui/input-otp.tsx
@@ -16,7 +16,7 @@ const InputOTP = React.forwardRef<
       "flex items-center gap-2 has-[:disabled]:opacity-50",
       containerClassName
     )}
-    className={cn("disabled:cursor-not-allowed", className)}
+    className={cn("disabled:cursor-not-allowed rtl:-mr-[40px]", className)}
     {...props}
   />
 ))
@@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-10 w-10 items-center justify-center border-y border-e border-input text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className
       )}
diff --git a/apps/www/registry/new-york/ui/input-otp.tsx b/apps/www/registry/new-york/ui/input-otp.tsx
index 84d07209056..d29e02cd0c2 100644
--- a/apps/www/registry/new-york/ui/input-otp.tsx
+++ b/apps/www/registry/new-york/ui/input-otp.tsx
@@ -16,7 +16,7 @@ const InputOTP = React.forwardRef<
       "flex items-center gap-2 has-[:disabled]:opacity-50",
       containerClassName
     )}
-    className={cn("disabled:cursor-not-allowed", className)}
+    className={cn("disabled:cursor-not-allowed rtl:-mr-[40px]", className)}
     {...props}
   />
 ))
@@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-9 w-9 items-center justify-center border-y border-e border-input text-sm shadow-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
         isActive && "z-10 ring-1 ring-ring",
         className
       )}

From 8525300f55e11d3e3ad7ce2e3696d9b77025e1e4 Mon Sep 17 00:00:00 2001
From: jjeem <alkheder.jad@gmail.com>
Date: Wed, 27 Nov 2024 22:36:16 +0300
Subject: [PATCH 20/22] feat(calendar): add rtl support

---
 apps/www/registry/default/ui/calendar.tsx  | 12 ++++++------
 apps/www/registry/new-york/ui/calendar.tsx | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx
index e04fe19511f..6bebe4cf147 100644
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -20,17 +20,17 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 rtl:space-x-reverse",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        nav: "space-x-1 flex items-center rtl:space-x-reverse",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
+        nav_button_previous: "absolute start-1",
+        nav_button_next: "absolute end-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
@@ -54,8 +54,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4 rtl:rotate-180" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4 rtl:rotate-180" />,
       }}
       {...props}
     />
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx
index 85571a1ca01..0c19c6f21ff 100644
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -20,17 +20,17 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 rtl:space-x-reverse",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        nav: "space-x-1 flex items-center rtl:space-x-reverse",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
+        nav_button_previous: "absolute start-1",
+        nav_button_next: "absolute end-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
@@ -60,8 +60,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4 rtl:rotate-180" />,
+        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4 rtl:rotate-180" />,
       }}
       {...props}
     />

From 3a5b777b98b17c03c30d0b59b9eef149cb823a0c Mon Sep 17 00:00:00 2001
From: Mohamed Alnahhas <alnahhas55@gmail.com>
Date: Fri, 6 Dec 2024 20:41:55 +0100
Subject: [PATCH 21/22] feat(toast): add rtl support

---
 apps/www/registry/default/ui/toast.tsx   | 6 +++---
 apps/www/registry/default/ui/toaster.tsx | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/www/registry/default/ui/toast.tsx b/apps/www/registry/default/ui/toast.tsx
index 521b94b0798..4a3d3d5e5de 100644
--- a/apps/www/registry/default/ui/toast.tsx
+++ b/apps/www/registry/default/ui/toast.tsx
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 rtl:space-x-reverse overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 rtl:data-[state=closed]:slide-out-to-left-full data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute end-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     )}
     toast-close=""
diff --git a/apps/www/registry/default/ui/toaster.tsx b/apps/www/registry/default/ui/toaster.tsx
index 3112913dcf2..3fbdd1518d1 100644
--- a/apps/www/registry/default/ui/toaster.tsx
+++ b/apps/www/registry/default/ui/toaster.tsx
@@ -9,12 +9,14 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/registry/default/ui/toast"
+import { useDirection } from "@radix-ui/react-direction"
 
 export function Toaster() {
   const { toasts } = useToast()
+  const dir = useDirection()
 
   return (
-    <ToastProvider>
+    <ToastProvider swipeDirection={dir == "rtl" ? "left" : "right"}>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>

From b159f6e92014f7f11646fa9f64f9291fab0d198c Mon Sep 17 00:00:00 2001
From: jjeem <alkheder.jad@gmail.com>
Date: Wed, 11 Dec 2024 00:37:34 +0300
Subject: [PATCH 22/22] feat(sidebar): add rtl support

---
 apps/www/registry/default/ui/sidebar.tsx  | 13 ++++++++-----
 apps/www/registry/new-york/ui/sidebar.tsx | 13 ++++++++-----
 apps/www/registry/registry-ui.ts          |  1 +
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/www/registry/default/ui/sidebar.tsx b/apps/www/registry/default/ui/sidebar.tsx
index 99a120e1ce5..d24760bd5bb 100644
--- a/apps/www/registry/default/ui/sidebar.tsx
+++ b/apps/www/registry/default/ui/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useDirection } from "@radix-ui/react-direction"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft } from "lucide-react"
@@ -166,9 +167,9 @@ const Sidebar = React.forwardRef<
 >(
   (
     {
-      side = "left",
       variant = "sidebar",
       collapsible = "offcanvas",
+      side: sideProp,
       className,
       children,
       ...props
@@ -176,6 +177,8 @@ const Sidebar = React.forwardRef<
     ref
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+    const dir = useDirection()
+    const side = sideProp ?? (dir === "rtl" ? "right" : "left")
 
     if (collapsible === "none") {
       return (
@@ -460,7 +463,7 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -512,7 +515,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -606,7 +609,7 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -631,7 +634,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
diff --git a/apps/www/registry/new-york/ui/sidebar.tsx b/apps/www/registry/new-york/ui/sidebar.tsx
index 77e91958edd..fff6215a6d5 100644
--- a/apps/www/registry/new-york/ui/sidebar.tsx
+++ b/apps/www/registry/new-york/ui/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useDirection } from "@radix-ui/react-direction"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft } from "lucide-react"
@@ -166,9 +167,9 @@ const Sidebar = React.forwardRef<
 >(
   (
     {
-      side = "left",
       variant = "sidebar",
       collapsible = "offcanvas",
+      side: sideProp,
       className,
       children,
       ...props
@@ -176,6 +177,8 @@ const Sidebar = React.forwardRef<
     ref
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+    const dir = useDirection()
+    const side = sideProp ?? (dir === "rtl" ? "right" : "left")
 
     if (collapsible === "none") {
       return (
@@ -460,7 +463,7 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -512,7 +515,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -606,7 +609,7 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -631,7 +634,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
diff --git a/apps/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index 4870f3abb1c..ac9ed851b0c 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -421,6 +421,7 @@ export const ui: Registry = [
     type: "registry:ui",
     dependencies: [
       "@radix-ui/react-slot",
+      "@radix-ui/react-direction",
       "class-variance-authority",
       "lucide-react",
     ],