@byyuurin/ui 0.0.4 → 0.0.6

package/dist/runtime/components/Carousel.vue

@@ -0,0 +1,310 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+import type { AutoHeightOptionsType } from 'embla-carousel-auto-height'
+import type { AutoScrollOptionsType } from 'embla-carousel-auto-scroll'
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay'
+import type { ClassNamesOptionsType } from 'embla-carousel-class-names'
+import type { FadeOptionsType } from 'embla-carousel-fade'
+import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
+import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
+import type { carousel } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+type CarouselVariants = VariantProps<typeof carousel>
+
+export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Pick<PrimitiveProps, 'as'>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+  /**
+   * Configure the prev button when arrows are enabled.
+   * @default { size: 'md', variant: 'link' }
+   */
+  prev?: ButtonProps
+  /**
+   * The icon displayed in the prev button.
+   * @default `app.icons.arrowLeft`
+   */
+  prevIcon?: string
+  /**
+   * Configure the next button when arrows are enabled.
+   * @default { size: 'md', variant: 'link' }
+   */
+  next?: ButtonProps
+  /**
+   * The icon displayed in the next button.
+   * @default `app.icons.arrowRight`
+   */
+  nextIcon?: string
+  /**
+   * Display prev and next buttons to scroll the carousel.
+   * @default false
+   */
+  arrows?: boolean
+  /**
+   * Display dots to scroll to a specific slide.
+   * @default false
+   */
+  dots?: boolean
+  orientation?: CarouselVariants['orientation']
+  items?: T[]
+  dir?: 'rtl' | 'ltr'
+  /**
+   * 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
+}
+
+export interface CarouselSlots<T> {
+  default?: (props: { item: T, index: number }) => any
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { computedAsync, reactivePick } from '@vueuse/core'
+import useEmblaCarousel from 'embla-carousel-vue'
+import { Primitive, useForwardProps } from 'reka-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<CarouselProps<T>>(), {
+  orientation: 'horizontal',
+  arrows: false,
+  dots: false,
+
+  dir: 'ltr',
+
+  // 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 rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.carousel)
+  return styler(props)
+})
+
+const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowRight : theme.value.app.icons.arrowLeft))
+const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.arrowLeft : theme.value.app.icons.arrowRight))
+
+const options = computed<EmblaOptionsType>(() => ({
+  ...(props.fade ? { align: 'center', containScroll: false } : {}),
+  ...rootProps.value,
+  axis: props.orientation === 'horizontal' ? 'x' : 'y',
+  direction: props.dir === 'rtl' ? 'rtl' : 'ltr',
+}))
+
+const plugins = computedAsync<EmblaPluginType[]>(async () => {
+  const plugins: EmblaPluginType[] = []
+
+  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="props.as"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    :dir="props.dir"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="style.viewport({ class: props.ui?.viewport })">
+      <div :class="style.container({ class: props.ui?.container })">
+        <div
+          v-for="(item, index) in props.items"
+          :key="index"
+          role="group"
+          aria-roledescription="slide"
+          :class="style.item({ class: props.ui?.item })"
+        >
+          <slot :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.arrows || props.dots" :class="style.controls({ class: props.ui?.controls })">
+      <div v-if="props.arrows" :class="style.arrows({ class: props.ui?.arrows })">
+        <Button
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          size="md"
+          variant="outline"
+          aria-label="prev"
+          v-bind="typeof props.prev === 'object' ? props.prev : undefined"
+          :class="style.prev({ class: props.ui?.prev })"
+          @click="scrollPrev"
+        />
+        <Button
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          size="md"
+          variant="outline"
+          aria-label="next"
+          v-bind="typeof props.next === 'object' ? props.next : undefined"
+          :class="style.next({ class: props.ui?.next })"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="props.dots" :class="style.dots({ class: props.ui?.dots })">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            :aria-label="`Go to ${index + 1}`"
+            :class="style.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            @click="scrollTo(index)"
+          ></button>
+        </template>
+      </div>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Checkbox.vue

@@ -37,10 +37,9 @@ export interface CheckboxSlots {
 import { reactivePick } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
-  size: 'md',
   required: false,
   disabled: false,
 })

package/dist/runtime/components/Chip.vue

@@ -0,0 +1,64 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { chip } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps extends ComponentAttrs<typeof chip>, Pick<PrimitiveProps, 'as'>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  variant?: ChipVariants['variant']
+  size?: ChipVariants['size']
+  label?: string
+}
+
+export interface ChipSlots {
+  prefix?: (props?: {}) => any
+  default?: (props?: {}) => any
+  suffix?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<ChipProps>(), {
+  variant: 'solid',
+})
+
+const slots = defineSlots<ChipSlots>()
+
+const { size, orientation } = useButtonGroup(props)
+const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.chip)
+  return styler({
+    ...props,
+    size: size.value,
+    groupOrientation: orientation.value,
+  })
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
+    <slot name="prefix">
+      <i v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></i>
+    </slot>
+
+    <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
+      <slot>{{ props.label }}</slot>
+    </span>
+
+    <slot name="suffix">
+      <i v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Drawer.vue

@@ -53,7 +53,7 @@ import { reactivePick } from '@vueuse/core'
 import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from 'vaul-vue'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
@@ -94,7 +94,7 @@ const style = computed(() => {
         <slot name="content">
           <div :class="style.container({ class: props.ui?.container })">
             <div
-              v-if="slots.header || (props.title || slots.title) || (props.description || slots.description)"
+              v-if="slots.header || props.title || slots.title || props.description || slots.description"
               :class="style.header({ class: props.ui?.header })"
             >
               <slot name="header">

package/dist/runtime/components/Input.vue

@@ -46,7 +46,9 @@ export interface InputSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
-import { useComponentIcons, useTheme } from '../composables'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
 
 defineOptions({
@@ -55,7 +57,6 @@ defineOptions({
 
 const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
-  size: 'md',
   variant: 'outline',
   autocomplete: 'off',
   autofocusDelay: 0,
@@ -67,14 +68,18 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 
+const { size, orientation } = useButtonGroup(props)
 const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.input)
-  // @ts-expect-error ignore type
   return styler({
     ...props,
+    // @ts-expect-error ignore type
+    type: props.type,
+    size: size.value,
+    groupOrientation: orientation.value,
     prefix: isPrefix.value || !!slots.prefix,
     suffix: isSuffix.value || !!slots.suffix,
   })
@@ -130,7 +135,7 @@ onMounted(() => {
 <template>
   <Primitive
     :as="as"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :class="style.base({ class: [props.class, props.ui?.base] })"
     :aria-disabled="props.disabled ? true : undefined"
   >
     <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
@@ -149,7 +154,7 @@ onMounted(() => {
       :value="modelValue"
       :name="props.name"
       :placeholder="props.placeholder"
-      :class="style.base({ class: props.ui?.base })"
+      :class="style.input({ class: props.ui?.input })"
       :disabled="props.disabled"
       :required="props.required"
       :autocomplete="props.autocomplete"

package/dist/runtime/components/Link.vue

@@ -32,7 +32,7 @@ export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'> {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
-import { useTheme } from '../composables'
+import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',

package/dist/runtime/components/Modal.vue

@@ -46,12 +46,11 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
 import { reactivePick } from '@vueuse/core'
 import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
 import { computed, toRef } from 'vue'
-import { useTheme } from '../composables'
-import UButton from './Button.vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   modal: true,
-  size: 'md',
   portal: true,
   overlay: true,
   transition: true,
@@ -95,7 +94,7 @@ const style = computed(() => {
       <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents">
         <slot name="content">
           <div
-            v-if="slots.header || (props.title || slots.title) || (props.description || slots.description) || (props.close || slots.close)"
+            v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
             :class="style.header({ class: props.ui?.header })"
           >
             <slot name="header">
@@ -110,7 +109,7 @@ const style = computed(() => {
 
               <DialogClose as-child>
                 <slot name="close">
-                  <UButton
+                  <Button
                     v-if="props.close"
                     variant="ghost"
                     :icon="props.closeIcon || theme.app.icons.close"

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
+import type { pagination } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+export interface PaginationProps extends ComponentAttrs<typeof pagination>, Pick<PaginationRootProps, 'as' | 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'> {
+  /**
+   * The icon to use for the first page control.
+   * @default app.icons.doubleLeft
+   */
+  firstIcon?: string
+  /**
+   * The icon to use for the last page control.
+   * @default app.icons.doubleRight
+   */
+  lastIcon?: string
+  /**
+   * The icon to use for the previous page control.
+   * @default app.icons.arrowLeft
+   */
+  prevIcon?: string
+  /**
+   * The icon to use for the next page control.
+   * @default app.icons.arrowRight
+   */
+  nextIcon?: string
+  /**
+   * The icon to use for the ellipsis control.
+   * @default app.icons.ellipsis
+   */
+  ellipsisIcon?: string
+  /**
+   * The size of the pagination controls.
+   * @default 'md'
+   */
+  size?: ButtonProps['size']
+  /**
+   * The variant of the pagination controls.
+   * @default 'outline'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The variant of the active pagination control.
+   * @default 'solid'
+   */
+  activeVariant?: ButtonProps['variant']
+  /**
+   * Whether to show the first, previous, next, and last controls.
+   * @default true
+   */
+  showControls?: boolean
+}
+
+export interface PaginationEmits extends PaginationRootEmits {}
+
+export interface PaginationSlots {
+  first?: (props?: {}) => any
+  prev?: (props?: {}) => any
+  next?: (props?: {}) => any
+  last?: (props?: {}) => any
+  ellipsis?: (props?: {}) => any
+  item?: (props: {
+    page: number
+    pageCount: number
+    item: {
+      type: 'ellipsis'
+    } | {
+      type: 'page'
+      value: number
+    }
+    index: number
+  }) => any
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  variant: 'outline',
+  activeVariant: 'solid',
+  showControls: true,
+  showEdges: false,
+  itemsPerPage: 10,
+  siblingCount: 2,
+  total: 0,
+})
+
+const emit = defineEmits<PaginationEmits>()
+const slots = defineSlots<PaginationSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emit)
+
+const { theme, createStyler } = useTheme()
+
+const firstIcon = computed(() => props.firstIcon || theme.value.app.icons.doubleLeft)
+const prevIcon = computed(() => props.prevIcon || theme.value.app.icons.arrowLeft)
+const nextIcon = computed(() => props.nextIcon || theme.value.app.icons.arrowRight)
+const lastIcon = computed(() => props.lastIcon || theme.value.app.icons.doubleRight)
+const ellipsisIcon = computed(() => props.ellipsisIcon || theme.value.app.icons.ellipsis)
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.pagination)
+  return styler(props)
+})
+</script>
+
+<template>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <PaginationList v-slot="{ items }" :class="style.list({ class: props.ui?.list })">
+      <PaginationFirst v-if="props.showControls || !!slots.first" as-child>
+        <slot name="first">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="firstIcon" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="props.showControls || !!slots.prev" as-child>
+        <slot name="prev">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="prevIcon" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <Button
+              :class="style.item({ class: props.ui?.item })"
+              :variant="props.page === item.value ? props.activeVariant : props.variant"
+              :size="props.size"
+              :label="String(item.value)"
+              :ui="{ label: style.label() }"
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+          <slot name="ellipsis">
+            <Button
+              :variant="props.variant"
+              :size="props.size"
+              :icon="ellipsisIcon"
+              :disabled="props.disabled /* TODO: remove after reka-ui update */"
+              :class="[
+                style.item({ class: props.ui?.item }),
+                style.ellipsis({ class: props.ui?.ellipsis }),
+              ]"
+            />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="props.showControls || !!slots.next" as-child>
+        <slot name="next">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="nextIcon" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="props.showControls || !!slots.last" as-child>
+        <slot name="last">
+          <Button :class="style.item({ class: props.ui?.item })" :variant="props.variant" :size="props.size" :icon="lastIcon" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>