feat: add carousel component

package.json

@@ -15,6 +15,13 @@
     "@vueuse/shared": "^12.5.0",
     "colortranslator": "^4.1.0",
     "defu": "^6.1.4",
+    "embla-carousel-auto-height": "^8.5.2",
+    "embla-carousel-auto-scroll": "^8.5.2",
+    "embla-carousel-autoplay": "^8.5.2",
+    "embla-carousel-class-names": "^8.5.2",
+    "embla-carousel-fade": "^8.5.2",
+    "embla-carousel-vue": "^8.5.2",
+    "embla-carousel-wheel-gestures": "^8.0.1",
     "ohash": "^1.1.4",
     "reka-ui": "1.0.0-alpha.8",
     "tailwind-variants": "^0.3.1",
@@ -33,6 +40,7 @@
     "@types/node": "^22.12.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
+    "embla-carousel": "^8.5.2",
     "eslint": "^9.19.0",
     "jsdom": "^26.0.0",
     "magicast": "^0.3.5",

playground/src/pages/components/carousel.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import Carousel from '@/ui/components/Carousel/Carousel.vue'
+
+const items = [
+  'https://picsum.photos/640/640?random=1',
+  'https://picsum.photos/640/640?random=2',
+  'https://picsum.photos/640/640?random=3',
+  'https://picsum.photos/640/640?random=4',
+  'https://picsum.photos/640/640?random=5',
+  'https://picsum.photos/640/640?random=6',
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 overflow-hidden">
+    <Carousel v-slot="{ item }" :items="items" class="w-full max-w-xs mx-auto">
+      <img :src="item" width="320" height="320" draggable="false">
+    </Carousel>
+
+    <Carousel v-slot="{ item }" arrows :items="items" class="w-full max-w-xs mx-auto">
+      <img :src="item" width="320" height="320" class="rounded-lg">
+    </Carousel>
+
+    <Carousel v-slot="{ item }" dots :items="items" class="w-full max-w-xs mx-auto">
+      <img :src="item" width="320" height="320" class="rounded-lg">
+    </Carousel>
+
+    <Carousel
+      v-slot="{ item }"
+      loop
+      dots
+      arrows
+      auto-scroll
+      :items="items"
+      :ui="{ item: 'basis-1/3' }"
+    >
+      <img :src="item" width="234" height="234" class="rounded-lg">
+    </Carousel>
+
+    <Carousel
+      v-slot="{ item }"
+      class-names
+      arrows
+      :items="items"
+      :ui="{
+        item: 'basis-[70%] transition-opacity [&:not(.is-snapped)]:opacity-10',
+      }"
+      class="mx-auto max-w-sm"
+    >
+      <img :src="item" width="264" height="264" class="rounded-lg">
+    </Carousel>
+  </div>
+</template>

playground/typed-router.d.ts

@@ -25,6 +25,7 @@ declare module 'vue-router/auto-routes' {
     '/components/button': RouteRecordInfo<'/components/button', '/components/button', Record<never, never>, Record<never, never>>,
     '/components/button-group': RouteRecordInfo<'/components/button-group', '/components/button-group', Record<never, never>, Record<never, never>>,
     '/components/card': RouteRecordInfo<'/components/card', '/components/card', Record<never, never>, Record<never, never>>,
+    '/components/carousel': RouteRecordInfo<'/components/carousel', '/components/carousel', Record<never, never>, Record<never, never>>,
     '/components/checkbox': RouteRecordInfo<'/components/checkbox', '/components/checkbox', Record<never, never>, Record<never, never>>,
     '/components/chip': RouteRecordInfo<'/components/chip', '/components/chip', Record<never, never>, Record<never, never>>,
     '/components/color-picker': RouteRecordInfo<'/components/color-picker', '/components/color-picker', Record<never, never>, Record<never, never>>,

src/components/Carousel/Carousel.test.ts

@@ -0,0 +1,63 @@
+import type { RenderOptions } from '@testing-library/vue'
+import Carousel from '@/ui/components/Carousel/Carousel.vue'
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+
+const CarouselWrapper = defineComponent({
+  components: {
+    Carousel: Carousel as any,
+  },
+  template: `<Carousel v-slot="{ item }">
+  <img :src="item.src" width="300" height="300" class="rounded-lg">
+</Carousel>`,
+})
+
+describe('carousel', () => {
+  globalThis.matchMedia = globalThis.matchMedia || (() => ({ addListener: () => {}, removeListener: () => {} }))
+
+  globalThis.IntersectionObserver = class IntersectionObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as any
+
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+
+  const items = [
+    { src: 'https://picsum.photos/600/600?random=1' },
+    { src: 'https://picsum.photos/600/600?random=2' },
+    { src: 'https://picsum.photos/600/600?random=3' },
+    { src: 'https://picsum.photos/600/600?random=4' },
+    { src: 'https://picsum.photos/600/600?random=5' },
+    { src: 'https://picsum.photos/600/600?random=6' },
+  ]
+
+  const props = { items }
+
+  it.each<[string, RenderOptions<typeof Carousel>]>([
+    // Props
+    ['with items', { props }],
+    ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const } }],
+    ['with arrows', { props: { ...props, arrows: true } }],
+    ['with prev', { props: { ...props, arrows: true, prev: { color: 'primary' as const } } }],
+    ['with next', { props: { ...props, arrows: true, next: { color: 'primary' as const } } }],
+    ['with dots', { props: { ...props, dots: true } }],
+    ['with as', { props: { ...props, as: 'nav' } }],
+    ['with class', { props: { ...props, class: 'w-full max-w-xs' } }],
+    ['with ui', { props: { ...props, ui: { viewport: 'h-[320px]' } } }],
+  ])('renders %s correctly', (name, options) => {
+    render(CarouselWrapper, {
+      attrs: {
+        'data-testid': 'carousel',
+      },
+      ...options,
+    })
+
+    expect(screen.getByTestId('carousel')).matchSnapshot()
+  })
+})