From c33acba4ffa94bd645cc7960956af3ab6ea0ed7c Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 15 Jan 2024 18:55:22 +0330
Subject: [PATCH] fix: prevent page zoom while tapping carousel buttons (#274)

* fix: prevent page zoom while tapping carousel buttons

choose shadcn-ui icons and sizes for buttons

* docs: fix carousel page responsive issues and ordering docs as shadcn-ui
---
 .../theme/components/ComponentPreview.vue     |  2 +-
 .../src/content/docs/components/carousel.md   | 25 +++++------
 .../registry/default/example/CarouselApi.vue  |  4 +-
 .../registry/default/example/CarouselDemo.vue | 32 +++++++-------
 .../default/example/CarouselOrientation.vue   | 44 +++++++++----------
 .../default/example/CarouselPlugin.vue        | 42 +++++++++---------
 .../registry/default/example/CarouselSize.vue | 42 +++++++++---------
 .../default/example/CarouselSpacing.vue       | 42 +++++++++---------
 .../default/ui/carousel/CarouselNext.vue      |  6 +--
 .../default/ui/carousel/CarouselPrevious.vue  |  6 +--
 .../registry/new-york/example/CarouselApi.vue |  4 +-
 .../new-york/example/CarouselDemo.vue         | 32 +++++++-------
 .../new-york/example/CarouselOrientation.vue  | 44 +++++++++----------
 .../new-york/example/CarouselPlugin.vue       | 42 +++++++++---------
 .../new-york/example/CarouselSize.vue         | 42 +++++++++---------
 .../new-york/example/CarouselSpacing.vue      | 42 +++++++++---------
 .../new-york/ui/carousel/CarouselNext.vue     |  6 +--
 .../new-york/ui/carousel/CarouselPrevious.vue |  6 +--
 18 files changed, 221 insertions(+), 242 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index 8653daa95..7620e0da3 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -52,7 +52,7 @@ const { style } = useConfigStore()
           </div>
         </div>
         <div
-          :class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
+          :class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
             'items-center': align === 'center',
             'items-start': align === 'start',
             'items-end': align === 'end',
diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
index c1a34a739..9ca1b11d4 100644
--- a/apps/www/src/content/docs/components/carousel.md
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -48,18 +48,6 @@ import {
 
 ## Examples
 
-### Orientation
-
-Use the `orientation` prop to set the orientation of the carousel.
-
-<ComponentPreview name="CarouselOrientation" />
-
-```vue
-<Carousel orientation="vertical | horizontal">
-  ...
-</Carousel>
-```
-
 ### Sizes
 
 To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
@@ -151,6 +139,17 @@ Responsive
 </template>
 ```
 
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview name="CarouselOrientation" />
+
+```vue
+<Carousel orientation="vertical | horizontal">
+  ...
+</Carousel>
+```
 
 ## Options
 
@@ -280,4 +279,4 @@ import Autoplay from 'embla-carousel-autoplay'
 
 <ComponentPreview name="CarouselPlugin" />
 
-See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
\ No newline at end of file
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
diff --git a/apps/www/src/lib/registry/default/example/CarouselApi.vue b/apps/www/src/lib/registry/default/example/CarouselApi.vue
index 0b25dc948..521d0e0a3 100644
--- a/apps/www/src/lib/registry/default/example/CarouselApi.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselApi.vue
@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-x-2">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+  <div class="w-full sm:w-auto">
+    <Carousel class="relative w-full max-w-xs" @init-api="setApi">
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
           <div class="p-1">
diff --git a/apps/www/src/lib/registry/default/example/CarouselDemo.vue b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
index 1fa4f1a33..c6f52f766 100644
--- a/apps/www/src/lib/registry/default/example/CarouselDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
@@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel class="w-full max-w-xs">
-      <CarouselContent>
-        <CarouselItem v-for="(_, index) in 5" :key="index">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel class="relative w-full max-w-xs">
+    <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
index 7d19c06ef..dcf06bd68 100644
--- a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
@@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
-    <Carousel
-      orientation="vertical"
-      class="w-full max-w-xs"
-      :opts="{
-        align: 'start',
-      }"
-    >
-      <CarouselContent class="-mt-1 h-[200px]">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex items-center justify-center p-6">
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    orientation="vertical"
+    class="relative w-full max-w-xsw-full max-w-xs"
+    :opts="{
+      align: 'start',
+    }"
+  >
+    <CarouselContent class="-mt-1 h-[200px]">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
index 7c7a3d006..bc16f071c 100644
--- a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
@@ -11,26 +11,24 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel
-      class="w-full max-w-xs"
-      :plugins="[plugin]"
-      @mouseenter="plugin.stop"
-      @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
-    >
-      <CarouselContent>
-        <CarouselItem v-for="(_, index) in 5" :key="index">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    class="relative w-full max-w-xs"
+    :plugins="[plugin]"
+    @mouseenter="plugin.stop"
+    @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
+  >
+    <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselSize.vue b/apps/www/src/lib/registry/default/example/CarouselSize.vue
index 127267848..dc9bc03d8 100644
--- a/apps/www/src/lib/registry/default/example/CarouselSize.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselSize.vue
@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel
-      class="w-full max-w-xs"
-      :opts="{
-        align: 'start',
-      }"
-    >
-      <CarouselContent>
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    class="relative w-full max-w-sm"
+    :opts="{
+      align: 'start',
+    }"
+  >
+    <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
index 6d8ee4039..04bc1024d 100644
--- a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel
-      class="w-full max-w-sm"
-      :opts="{
-        align: 'start',
-      }"
-    >
-      <CarouselContent class="-ml-1">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    class="relative w-full max-w-sm"
+    :opts="{
+      align: 'start',
+    }"
+  >
+    <CarouselContent class="-ml-1">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-2xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
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 3b87ad3fc..012f807e8 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronRight } from 'lucide-vue-next'
+import { ArrowRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
   <Button
     :disabled="!canScrollNext"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ChevronRight class="h-4 w-4 text-current" />
+      <ArrowRight class="h-4 w-4 text-current" />
     </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 51dda3ce3..9a71f7359 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronLeft } from 'lucide-vue-next'
+import { ArrowLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
   <Button
     :disabled="!canScrollPrev"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ChevronLeft class="h-4 w-4 text-current" />
+      <ArrowLeft class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselApi.vue b/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
index cf3d838d8..1bee35047 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-x-2">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+  <div class="w-full sm:w-auto">
+    <Carousel class="relative w-full max-w-xs" @init-api="setApi">
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
           <div class="p-1">
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
index 0b33bc755..53f117c46 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
@@ -4,21 +4,19 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel class="w-full max-w-xs">
-      <CarouselContent>
-        <CarouselItem v-for="(_, index) in 5" :key="index">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel class="relative w-full max-w-xs">
+    <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue b/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
index ab1cc66a7..c4d2ee03e 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
@@ -4,27 +4,25 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
-    <Carousel
-      orientation="vertical"
-      class="w-full max-w-xs"
-      :opts="{
-        align: 'start',
-      }"
-    >
-      <CarouselContent class="-mt-1 h-[200px]">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex items-center justify-center p-6">
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    orientation="vertical"
+    class="relative w-full max-w-xs"
+    :opts="{
+      align: 'start',
+    }"
+  >
+    <CarouselContent class="-mt-1 h-[200px]">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
index 9c2202f5a..2d0b6f63d 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
@@ -11,26 +11,24 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel
-      class="w-full max-w-xs"
-      :plugins="[plugin]"
-      @mouseenter="plugin.stop"
-      @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
-    >
-      <CarouselContent>
-        <CarouselItem v-for="(_, index) in 5" :key="index">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    class="relative w-full max-w-xs"
+    :plugins="[plugin]"
+    @mouseenter="plugin.stop"
+    @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
+  >
+    <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-4xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
index 596027743..8d28839ef 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel
-      class="w-full max-w-xs"
-      :opts="{
-        align: 'start',
-      }"
-    >
-      <CarouselContent>
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    class="relative w-full max-w-xs"
+    :opts="{
+      align: 'start',
+    }"
+  >
+    <CarouselContent>
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-3xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
index d7675c997..7e4603ca5 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
@@ -4,26 +4,24 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
-    <Carousel
-      class="w-full max-w-sm"
-      :opts="{
-        align: 'start',
-      }"
-    >
-      <CarouselContent class="-ml-1">
-        <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
-          <div class="p-1">
-            <Card>
-              <CardContent class="flex aspect-square items-center justify-center p-6">
-                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  </div>
+  <Carousel
+    class="w-full max-w-sm"
+    :opts="{
+      align: 'start',
+    }"
+  >
+    <CarouselContent class="-ml-1">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+        <div class="p-1">
+          <Card>
+            <CardContent class="flex aspect-square items-center justify-center p-6">
+              <span class="text-2xl font-semibold">{{ index + 1 }}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
 </template>
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 5bbb489e0..39c1daa75 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from '@radix-icons/vue'
+import { ArrowRightIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
   <Button
     :disabled="!canScrollNext"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
     @click="scrollNext"
   >
     <slot>
-      <ChevronRightIcon class="h-4 w-4 text-current" />
+      <ArrowRightIcon class="h-4 w-4 text-current" />
     </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 b39d820ae..adb34c690 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronLeftIcon } from '@radix-icons/vue'
+import { ArrowLeftIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
@@ -14,7 +14,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
   <Button
     :disabled="!canScrollPrev"
     :class="cn(
-      'absolute h-10 w-10 rounded-full p-0',
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -24,7 +24,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
     @click="scrollPrev"
   >
     <slot>
-      <ChevronLeftIcon class="h-4 w-4 text-current" />
+      <ArrowLeftIcon class="h-4 w-4 text-current" />
     </slot>
   </Button>
 </template>