From 2e4c3082a1e66fa597086dc3431fec37fa29ef62 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 15 May 2025 14:26:32 +0200
Subject: [PATCH] fix(InputNumber): handle inside button group

Resolves #4155
---
 src/runtime/components/Input.vue       |  1 +
 src/runtime/components/InputNumber.vue | 12 ++++++++----
 src/runtime/components/Textarea.vue    |  1 +
 src/theme/input-number.ts              |  2 ++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 7840a1f1..6def9c36 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -80,6 +80,7 @@ const slots = defineSlots<InputSlots>()
 const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Input['AppConfig']
+
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index a3a1b4a0..cdbe473b 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -79,6 +79,7 @@ import { onMounted, ref, computed } from 'vue'
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useFormField } from '../composables/useFormField'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
@@ -94,21 +95,24 @@ const props = withDefaults(defineProps<InputNumberProps>(), {
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
 
+const { t, code: codeLocale } = useLocale()
 const appConfig = useAppConfig() as InputNumber['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)
 
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputNumberProps>(props)
 
-const { t, code: codeLocale } = useLocale()
 const locale = computed(() => props.locale || codeLocale.value)
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })({
   color: color.value,
   variant: props.variant,
-  size: size.value,
+  size: inputSize.value,
   highlight: highlight.value,
-  orientation: props.orientation
+  orientation: props.orientation,
+  buttonGroup: orientation.value
 }))
 
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 51ab3959..47fca72d 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -79,6 +79,7 @@ const slots = defineSlots<TextareaSlots>()
 const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Textarea['AppConfig']
+
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index cdc3391d..dab62f65 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -1,5 +1,6 @@
 import type { ModuleOptions } from '../module'
 import inputTheme from './input'
+import { buttonGroupVariantWithRoot } from './button-group'
 
 export default (options: Required<ModuleOptions>) => {
   const input = inputTheme(options)
@@ -12,6 +13,7 @@ export default (options: Required<ModuleOptions>) => {
       decrement: 'absolute flex items-center'
     },
     variants: {
+      ...buttonGroupVariantWithRoot,
       color: {
         ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
         neutral: ''