From 71d97fac573b19105abcbc74a524398fe57c3eac Mon Sep 17 00:00:00 2001
From: Raed Bahri <raedbahri90@gmail.com>
Date: Tue, 5 Mar 2024 09:16:03 +0100
Subject: [PATCH] fix: add rotation on rtl for chevrons and arrows

---
 .../src/lib/registry/default/example/ButtonIconDemo.vue   | 2 +-
 .../www/src/lib/registry/default/ui/calendar/Calendar.vue | 8 ++++----
 .../src/lib/registry/default/ui/carousel/CarouselNext.vue | 2 +-
 .../lib/registry/default/ui/carousel/CarouselPrevious.vue | 2 +-
 .../default/ui/context-menu/ContextMenuSubTrigger.vue     | 2 +-
 .../default/ui/dropdown-menu/DropdownMenuSubTrigger.vue   | 2 +-
 .../lib/registry/default/ui/menubar/MenubarSubTrigger.vue | 2 +-
 .../lib/registry/default/ui/pagination/PaginationNext.vue | 2 +-
 .../lib/registry/default/ui/pagination/PaginationPrev.vue | 2 +-
 .../src/lib/registry/new-york/example/ButtonIconDemo.vue  | 2 +-
 .../src/lib/registry/new-york/ui/calendar/Calendar.vue    | 8 ++++----
 .../lib/registry/new-york/ui/carousel/CarouselNext.vue    | 2 +-
 .../registry/new-york/ui/carousel/CarouselPrevious.vue    | 2 +-
 .../new-york/ui/context-menu/ContextMenuSubTrigger.vue    | 2 +-
 .../new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue  | 2 +-
 .../registry/new-york/ui/menubar/MenubarSubTrigger.vue    | 2 +-
 .../registry/new-york/ui/pagination/PaginationFirst.vue   | 2 +-
 .../registry/new-york/ui/pagination/PaginationLast.vue    | 2 +-
 .../registry/new-york/ui/pagination/PaginationNext.vue    | 2 +-
 .../registry/new-york/ui/pagination/PaginationPrev.vue    | 2 +-
 20 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
index 2b4ce9a3..ca82a0d8 100644
--- a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
@@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'
 
 <template>
   <Button variant="outline" size="icon">
-    <ChevronRight class="w-4 h-4" />
+    <ChevronRight class="w-4 h-4 rtl:rotate-180" />
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index dd71b008..81d8ac5a 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -80,10 +80,10 @@ const vCalendarSlots = computed(() => {
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeft class="w-4 h-4" />
+        <ChevronLeft class="w-4 h-4 rtl:rotate-180" />
       </button>
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRight class="w-4 h-4" />
+        <ChevronRight class="w-4 h-4 rtl:rotate-180" />
       </button>
     </div>
 
@@ -102,11 +102,11 @@ const vCalendarSlots = computed(() => {
       </template>
 
       <template #nav-prev-button>
-        <ChevronLeft />
+        <ChevronLeft class="rtl:rotate-180" />
       </template>
 
       <template #nav-next-button>
-        <ChevronRight />
+        <ChevronRight class="rtl:rotate-180" />
       </template>
     </DatePicker>
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index 63f5f975..e1f8d960 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ArrowRight class="h-4 w-4 text-current" />
+      <ArrowRight class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index 6930e8c0..1373c386 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeft class="h-4 w-4 text-current" />
+      <ArrowLeft class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
index 0a9ecb47..ef79b8ce 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ms-auto h-4 w-4" />
+    <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 3c99e043..9af48c5c 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ms-auto h-4 w-4" />
+    <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
index 3e12f8a8..86730327 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
@@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ms-auto h-4 w-4" />
+    <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
   </MenubarSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
index 360cb43d..6ab2f1af 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationNext v-bind="delegatedProps">
     <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRight class="h-4 w-4" />
+        <ChevronRight class="h-4 w-4 rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
index e37aeb64..f3a03327 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationPrev v-bind="delegatedProps">
     <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeft class="h-4 w-4" />
+        <ChevronLeft class="h-4 w-4 rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationPrev>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
index d1bc3d2d..94800adc 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
@@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button'
 
 <template>
   <Button variant="outline" size="icon">
-    <ChevronRightIcon class="w-4 h-4" />
+    <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 32edfdd3..0f8a6b4a 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -81,10 +81,10 @@ const vCalendarSlots = computed(() => {
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeftIcon class="w-4 h-4" />
+        <ChevronLeftIcon class="w-4 h-4 rtl:rotate-180" />
       </button>
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRightIcon class="w-4 h-4" />
+        <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
       </button>
     </div>
 
@@ -103,11 +103,11 @@ const vCalendarSlots = computed(() => {
       </template>
 
       <template #nav-prev-button>
-        <ChevronLeft />
+        <ChevronLeftIcon class="rtl:rotate-180" />
       </template>
 
       <template #nav-next-button>
-        <ChevronRight />
+        <ChevronRightIcon class="rtl:rotate-180" />
       </template>
     </DatePicker>
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index 3429ef26..3ae9372f 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ArrowRightIcon class="h-4 w-4 text-current" />
+      <ArrowRightIcon class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index 5780396d..154861c7 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeftIcon class="h-4 w-4 text-current" />
+      <ArrowLeftIcon class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index 9d036206..35c93e89 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ms-auto h-4 w-4" />
+    <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 1fa122f0..13d393aa 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ms-auto h-4 w-4" />
+    <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index b824e91d..6f2dba7f 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
@@ -25,6 +25,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ms-auto h-4 w-4" />
+    <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
   </MenubarSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
index ecb8735d..365cbd36 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationFirst v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowLeftIcon />
+        <DoubleArrowLeftIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationFirst>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
index d1c06f84..d822df0a 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationLast v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowRightIcon />
+        <DoubleArrowRightIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationLast>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
index 360f5f28..11a08c7a 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationNext v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRightIcon />
+        <ChevronRightIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
index 12d51205..00c4af2d 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationPrev v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeftIcon />
+        <ChevronLeftIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationPrev>