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 1/3] 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 2/3] 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 3/3] 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}
     />