feat(Carousel): implement component (#2288)

src/theme/carousel.ts

@@ -0,0 +1,40 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'relative focus:outline-none',
+    viewport: 'overflow-hidden',
+    container: 'flex items-start',
+    item: 'min-w-0 shrink-0 basis-full',
+    controls: '',
+    arrows: '',
+    prev: 'absolute rounded-full',
+    next: 'absolute rounded-full',
+    dots: 'absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3',
+    dot: ['cursor-pointer size-3 bg-[--ui-border-accented] rounded-full', options.theme.transitions && 'transition']
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        container: 'flex-col -mt-4',
+        item: 'pt-4',
+        prev: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        next: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90'
+      },
+      horizontal: {
+        container: 'flex-row -ml-4',
+        item: 'pl-4',
+        prev: '-left-12 top-1/2 -translate-y-1/2',
+        next: '-right-12 top-1/2 -translate-y-1/2'
+      }
+    },
+    active: {
+      true: {
+        dot: 'bg-[--ui-border-inverted]'
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+})