feat: create demos for the carousel component

apps/www/__registry__/index.ts

@@ -184,6 +184,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardWithForm.vue'],
     },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselDemo.vue'],
+    },
+    CarouselOrientation: {
+      name: 'CarouselOrientation',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',

apps/www/src/lib/registry/default/example/CarouselDemo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+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>
+</template>

apps/www/src/lib/registry/default/example/CarouselOrientation.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+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>
+</template>