@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/runtime/components/Button.vue

@@ -1,10 +1,13 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/button'
 import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
+import type { AvatarProps } from '../types'
 import type { PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
@@ -22,10 +25,16 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   square?: boolean
   /** Render the button full width. */
   block?: boolean
+  /** Set loading state automatically based on the `@click` promise state */
+  loadingAuto?: boolean
+  onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
   ui?: PartialString<typeof button.slots>
 }
 
+// Injects props to use as default in the devtools playground.
+extendDevtoolsMeta<ButtonProps>({ defaultProps: { label: 'Click me!' } })
+
 export interface ButtonSlots {
   leading(props?: {}): any
   default(props?: {}): any
@@ -34,13 +43,16 @@ export interface ButtonSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useForwardProps } from 'radix-vue'
+import { type Ref, computed, ref, inject } from 'vue'
+import { useForwardProps } from 'reka-ui'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
+import { formLoadingInjectionKey } from '../composables/useFormField'
+import { omit } from '../utils'
+import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
-import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<ButtonProps>()
 const slots = defineSlots<ButtonSlots>()
@@ -48,13 +60,33 @@ const slots = defineSlots<ButtonSlots>()
 const linkProps = useForwardProps(pickLinkProps(props))
 
 const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const loadingAutoState = ref(false)
+const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
+
+async function onClickWrapper(event: MouseEvent) {
+  loadingAutoState.value = true
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+  try {
+    await Promise.all(callbacks.map(fn => fn?.(event)))
+  } finally {
+    loadingAutoState.value = false
+  }
+}
+
+const isLoading = computed(() => {
+  return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))
+})
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
+  computed(() => ({ ...props, loading: isLoading.value }))
+)
 
 const ui = computed(() => button({
   color: props.color,
   variant: props.variant,
   size: buttonSize.value,
-  loading: props.loading,
+  loading: isLoading.value,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
@@ -64,9 +96,17 @@ const ui = computed(() => button({
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
+  <ULink
+    :type="type"
+    :disabled="disabled || isLoading"
+    :class="ui.base({ class: [props.class, props.ui?.base] })"
+    v-bind="omit(linkProps, ['type', 'disabled'])"
+    raw
+    @click="onClickWrapper"
+  >
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>

package/dist/runtime/components/ButtonGroup.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/button-group'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
 const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
 
@@ -28,11 +30,13 @@ export interface ButtonGroupProps {
 export interface ButtonGroupSlots {
   default(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'ButtonGroupExample' })
 </script>
 
 <script setup lang="ts">
 import { provide, computed } from 'vue'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
@@ -47,7 +51,7 @@ provide(buttonGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="buttonGroup({ orientation })">
+  <Primitive :as="as" :class="buttonGroup({ orientation, class: props.class })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,191 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
+import type { DateValue } from '@internationalized/date'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/calendar'
+import { tv } from '../utils/tv'
+
+const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
+
+const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? DateRange
+  : M extends true
+    ? DateValue[]
+    : DateValue
+
+export interface CalendarProps<R extends boolean, M extends boolean> extends Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon to use for the next year control.
+   * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   */
+  nextYearIcon?: string
+  /**
+   * The icon to use for the next month control.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   */
+  nextMonthIcon?: string
+  /**
+   * The icon to use for the previous year control.
+   * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   */
+  prevYearIcon?: string
+  /**
+   * The icon to use for the previous month control.
+   * @defaultValue appConfig.ui.icons.chevronLeft
+   */
+  prevMonthIcon?: string
+  color?: CalendarVariants['color']
+  size?: CalendarVariants['size']
+  /** Whether or not a range of dates can be selected */
+  range?: R & boolean
+  /** Whether or not multiple dates can be selected */
+  multiple?: M & boolean
+  /** Show month controls */
+  monthControls?: boolean
+  /** Show year controls */
+  yearControls?: boolean
+  defaultValue?: CalendarModelValue<R, M>
+  modelValue?: CalendarModelValue<R, M>
+  class?: any
+  ui?: Partial<typeof calendar.slots>
+}
+
+export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+  'update:modelValue': [date: CalendarModelValue<R, M>]
+}
+
+export interface CalendarSlots {
+  'heading': (props: { value: string }) => any
+  'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any
+  'week-day': (props: { day: string }) => any
+}
+</script>
+
+<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+import { computed } from 'vue'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Calendar as SingleCalendar, RangeCalendar } from 'reka-ui/namespaced'
+import { reactiveOmit } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+  fixedWeeks: true,
+  monthControls: true,
+  yearControls: true
+})
+const emits = defineEmits<CalendarEmits<R, M>>()
+defineSlots<CalendarSlots>()
+
+const { code: locale, dir, t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
+
+const ui = computed(() => calendar({
+  color: props.color,
+  size: props.size
+}))
+
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 })
+  }
+
+  return date.add({ years: 1 })
+}
+
+const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
+</script>
+
+<template>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-bind="rootProps"
+    :model-value="(modelValue as CalendarModelValue<true & false>)"
+    :default-value="(defaultValue as CalendarModelValue<true & false>)"
+    :locale="locale"
+    :dir="dir"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>

package/dist/runtime/components/Card.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/card'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
 const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
 
@@ -23,10 +24,12 @@ export interface CardSlots {
   default(props?: {}): any
   footer(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'CardExample' })
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = defineProps<CardProps>()
 const slots = defineSlots<CardSlots>()

package/dist/runtime/components/Carousel.vue

@@ -0,0 +1,323 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import type { AcceptableValue } from 'reka-ui'
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll'
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height'
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
+import type { FadeOptionsType } from 'embla-carousel-fade'
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/carousel'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
+import type { ButtonProps } from '../types'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { carousel: Partial<typeof theme> } }
+
+const carousel = tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })
+
+type CarouselVariants = VariantProps<typeof carousel>
+
+export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * Configure the prev button when arrows are enabled.
+   * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+   */
+  prev?: ButtonProps
+  /**
+   * The icon displayed in the prev button.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   */
+  prevIcon?: string
+  /**
+   * Configure the next button when arrows are enabled.
+   * @defaultValue { size: 'md', color: 'neutral', variant: 'link' }
+   */
+  next?: ButtonProps
+  /**
+   * The icon displayed in the next button.
+   * @defaultValue appConfig.ui.icons.arrowRight
+   */
+  nextIcon?: string
+  /**
+   * Display prev and next buttons to scroll the carousel.
+   * @defaultValue false
+   */
+  arrows?: boolean
+  /**
+   * Display dots to scroll to a specific slide.
+   * @defaultValue false
+   */
+  dots?: boolean
+  orientation?: CarouselVariants['orientation']
+  items?: T[]
+  /**
+   * Enable Autoplay plugin
+   * @link https://www.embla-carousel.com/plugins/autoplay/
+   */
+  autoplay?: boolean | AutoplayOptionsType
+  /**
+   * Enable Auto Scroll plugin
+   * @link https://www.embla-carousel.com/plugins/auto-scroll/
+   */
+  autoScroll?: boolean | AutoScrollOptionsType
+  /**
+   * Enable Auto Height plugin
+   * @link https://www.embla-carousel.com/plugins/auto-height/
+   */
+  autoHeight?: boolean | AutoHeightOptionsType
+  /**
+   * Enable Class Names plugin
+   * @link https://www.embla-carousel.com/plugins/class-names/
+   */
+  classNames?: boolean | ClassNamesOptionsType
+  /**
+   * Enable Fade plugin
+   * @link https://www.embla-carousel.com/plugins/fade/
+   */
+  fade?: boolean | FadeOptionsType
+  /**
+   * Enable Wheel Gestures plugin
+   * @link https://www.embla-carousel.com/plugins/wheel-gestures/
+   */
+  wheelGestures?: boolean | WheelGesturesPluginOptions
+  class?: any
+  ui?: PartialString<typeof carousel.slots>
+}
+
+export type CarouselSlots<T> = {
+  default(props: { item: T, index: number }): any
+}
+
+extendDevtoolsMeta({ example: 'CarouselExample' })
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { computed, ref, watch, onMounted } from 'vue'
+import useEmblaCarousel from 'embla-carousel-vue'
+import { Primitive, useForwardProps } from 'reka-ui'
+import { reactivePick, computedAsync } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<CarouselProps<T>>(), {
+  orientation: 'horizontal',
+  arrows: false,
+  dots: false,
+  // Embla Options
+  active: true,
+  align: 'center',
+  breakpoints: () => ({}),
+  containScroll: 'trimSnaps',
+  dragFree: false,
+  dragThreshold: 10,
+  duration: 25,
+  inViewThreshold: 0,
+  loop: false,
+  skipSnaps: false,
+  slidesToScroll: 1,
+  startIndex: 0,
+  watchDrag: true,
+  watchResize: true,
+  watchSlides: true,
+  watchFocus: true,
+  // Embla Plugins
+  autoplay: false,
+  autoScroll: false,
+  autoHeight: false,
+  classNames: false,
+  fade: false,
+  wheelGestures: false
+})
+defineSlots<CarouselSlots<T>>()
+
+const appConfig = useAppConfig()
+const { dir, t } = useLocale()
+const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
+
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight))
+
+const ui = computed(() => carousel({
+  orientation: props.orientation
+}))
+
+const options = computed<EmblaOptionsType>(() => ({
+  ...(props.fade ? { align: 'center', containScroll: false } : {}),
+  ...rootProps.value,
+  axis: props.orientation === 'horizontal' ? 'x' : 'y',
+  direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
+}))
+
+const plugins = computedAsync<EmblaPluginType[]>(async () => {
+  const plugins = []
+
+  if (props.autoplay) {
+    const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
+    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+  }
+
+  if (props.autoScroll) {
+    const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
+    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+  }
+
+  if (props.autoHeight) {
+    const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
+    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+  }
+
+  if (props.classNames) {
+    const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
+    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+  }
+
+  if (props.fade) {
+    const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
+    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+  }
+
+  if (props.wheelGestures) {
+    const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
+    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+  }
+
+  return plugins
+})
+
+const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
+
+watch([options, plugins], () => {
+  emblaApi.value?.reInit(options.value, plugins.value)
+})
+
+function scrollPrev() {
+  emblaApi.value?.scrollPrev()
+}
+function scrollNext() {
+  emblaApi.value?.scrollNext()
+}
+function scrollTo(index: number) {
+  emblaApi.value?.scrollTo(index)
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+
+const canScrollNext = ref(false)
+const canScrollPrev = ref(false)
+const selectedIndex = ref<number>(0)
+const scrollSnaps = ref<number[]>([])
+
+function onInit(api: EmblaCarouselType) {
+  scrollSnaps.value = api?.scrollSnapList() || []
+}
+function onSelect(api: EmblaCarouselType) {
+  canScrollNext.value = api?.canScrollNext() || false
+  canScrollPrev.value = api?.canScrollPrev() || false
+  selectedIndex.value = api?.selectedScrollSnap() || 0
+}
+
+onMounted(() => {
+  if (!emblaApi.value) {
+    return
+  }
+
+  emblaApi.value?.on('init', onInit)
+  emblaApi.value?.on('init', onSelect)
+  emblaApi.value?.on('reInit', onInit)
+  emblaApi.value?.on('reInit', onSelect)
+  emblaApi.value?.on('select', onSelect)
+})
+
+defineExpose({
+  emblaRef,
+  emblaApi
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div :class="ui.container({ class: props.ui?.container })">
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          role="group"
+          aria-roledescription="slide"
+          :class="ui.item({ class: props.ui?.item })"
+        >
+          <slot :item="item" :index="index" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="arrows || dots" :class="ui.controls({ class: props.ui?.controls })">
+      <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
+        <UButton
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          size="md"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.prev')"
+          v-bind="typeof prev === 'object' ? prev : undefined"
+          :class="ui.prev({ class: props.ui?.prev })"
+          @click="scrollPrev"
+        />
+        <UButton
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          size="md"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.next')"
+          v-bind="typeof next === 'object' ? next : undefined"
+          :class="ui.next({ class: props.ui?.next })"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            @click="scrollTo(index)"
+          />
+        </template>
+      </div>
+    </div>
+  </Primitive>
+</template>