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'
+  }
+})

src/theme/icons.ts

@@ -4,6 +4,8 @@ export default {
   chevronDown: 'i-heroicons-chevron-down-20-solid',
   chevronLeft: 'i-heroicons-chevron-left-20-solid',
   chevronRight: 'i-heroicons-chevron-right-20-solid',
+  arrowLeft: 'i-heroicons-arrow-left-20-solid',
+  arrowRight: 'i-heroicons-arrow-right-20-solid',
   check: 'i-heroicons-check-20-solid',
   close: 'i-heroicons-x-mark-20-solid',
   ellipsis: 'i-heroicons-ellipsis-horizontal-20-solid',

src/theme/index.ts

@@ -7,6 +7,7 @@ export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
 export { default as buttonGroup } from './button-group'
 export { default as card } from './card'
+export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'