@byyuurin/ui 0.0.5 → 0.0.7

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

@@ -40,7 +40,6 @@ import { computed, useId } from 'vue'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
-  size: 'md',
   required: false,
   disabled: false,
 })
@@ -79,11 +78,11 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <CheckboxIndicator as-child force-mount>
-          <i
+          <span
             v-if="modelValue === 'indeterminate'"
             :class="style.icon({ class: [props.indeterminateIcon || theme.app.icons.indeterminate, props.ui?.icon] })"
-          ></i>
-          <i v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></i>
+          ></span>
+          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></span>
         </CheckboxIndicator>
       </CheckboxRoot>
     </div>

package/dist/runtime/components/Chip.vue

@@ -23,29 +23,34 @@ export interface ChipSlots {
 <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',
-  size: 'md',
 })
 
 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)
+  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>
+      <span v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></span>
     </slot>
 
     <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
@@ -53,7 +58,7 @@ const style = computed(() => {
     </span>
 
     <slot name="suffix">
-      <i v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+      <span v-if="isSuffix && suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></span>
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Collapsible.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import type { collapsible } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default?: (props: { open: boolean }) => any
+  content?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<CollapsibleProps>(), {
+  unmountOnHide: true,
+})
+const emit = defineEmits<CollapsibleEmits>()
+const slots = defineSlots<CollapsibleSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.collapsible)
+  return styler(props)
+})
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+  >
+    <CollapsibleTrigger v-if="slots.default" as-child>
+      <slot :open="open"></slot>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="style.content({ class: props.ui?.content })">
+      <slot name="content"></slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
+
+<style>
+@keyframes collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}
+</style>

package/dist/runtime/components/Drawer.vue

@@ -15,8 +15,10 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
    * @default true
    */
   overlay?: boolean
-  blur?: boolean
-  full?: boolean
+  /**
+   * Whether to inset the drawer from the edges.
+   */
+  inset?: boolean
   /**
    * Render a handle on the drawer.
    * @default true

package/dist/runtime/components/Input.vue

@@ -46,6 +46,7 @@ export interface InputSlots {
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
@@ -56,7 +57,6 @@ defineOptions({
 
 const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
-  size: 'md',
   variant: 'outline',
   autocomplete: 'off',
   autofocusDelay: 0,
@@ -68,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,
   })
@@ -131,15 +135,15 @@ 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 })">
       <slot name="prefix">
-        <i
+        <span
           v-if="isPrefix && prefixIconName"
           :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-        ></i>
+        ></span>
       </slot>
     </span>
 
@@ -150,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"
@@ -164,10 +168,10 @@ onMounted(() => {
 
     <span v-if="isSuffix || slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
       <slot name="suffix">
-        <i
+        <span
           v-if="isSuffix && suffixIconName"
           :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-        ></i>
+        ></span>
       </slot>
     </span>
   </Primitive>

package/dist/runtime/components/InputNumber.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { NumberFieldRootProps } from 'reka-ui'
+import type { inputNumber } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+export interface InputNumberEmits {
+  (e: 'update:modelValue', payload: number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', payload: Event): void
+}
+
+export interface InputNumberSlots {
+  increment?: (props?: {}) => any
+  decrement?: (props?: {}) => any
+}
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pick<NumberFieldRootProps, 'as' | 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  variant?: InputNumberVariants['variant']
+  size?: InputNumberVariants['size']
+  underline?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * The orientation of the input menu.
+   * @default 'horizontal'
+   */
+  orientation?: InputNumberVariants['orientation']
+  /**
+   * Configure the increment button. The `color` and `size` are inherited.
+   * @default { variant: 'link' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @default app.icons.plus
+   */
+  incrementIcon?: string
+  /**
+   * Configure the decrement button. The `color` and `size` are inherited.
+   * @default { variant: 'link' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @default app.icons.minus
+   */
+  decrementIcon?: string
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   */
+  locale?: string
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal',
+})
+
+const emit = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emit)
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+const { theme, createStyler } = useTheme()
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.up))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.down))
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.inputNumber)
+  return styler(props)
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+defineExpose({
+  inputRef,
+})
+
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus()
+}
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event)
+}
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="props.id"
+    :name="props.name"
+    :disabled="props.disabled"
+    :locale="props.locale"
+    :class="style.base({ class: [props.class, props.ui?.base] })"
+    :aria-disabled="props.disabled ? true : undefined"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="$attrs"
+      ref="inputRef"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :class="style.input({ class: props.ui?.input })"
+      @blur="onBlur"
+    />
+
+    <div :class="style.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="props.disabled">
+        <slot name="increment">
+          <Button
+            :icon="incrementIcon"
+            :size="props.size"
+            variant="link"
+            aria-label="increment"
+            v-bind="typeof props.increment === 'object' ? props.increment : undefined"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="style.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="props.disabled">
+        <slot name="decrement">
+          <Button
+            :icon="decrementIcon"
+            :size="props.size"
+            variant="link"
+            aria-label="decrement"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>