From 0dfd8b3248d2f0fe6422ff4f03f027427282639b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 18 Jul 2024 11:24:40 +0200
Subject: [PATCH] fix(ButtonGroup): define its own `size` variant

---
 src/runtime/components/ButtonGroup.vue    | 3 +--
 src/runtime/composables/useButtonGroup.ts | 2 +-
 src/theme/button-group.ts                 | 7 +++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/ButtonGroup.vue b/src/runtime/components/ButtonGroup.vue
index 8f949c8b..67ad882f 100644
--- a/src/runtime/components/ButtonGroup.vue
+++ b/src/runtime/components/ButtonGroup.vue
@@ -3,7 +3,6 @@ import { tv, 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 type { ButtonProps } from './Button.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
 
@@ -17,7 +16,7 @@ export interface ButtonGroupProps {
    * @defaultValue 'div'
    */
   as?: any
-  size?: ButtonProps['size']
+  size?: ButtonGroupVariants['size']
   /**
    * The orientation the buttons are laid out.
    * @defaultValue 'horizontal'
diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
index 7e629642..1648ff18 100644
--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -4,7 +4,7 @@ import type { ButtonGroupProps } from '../components/ButtonGroup.vue'
 import type { GetObjectField } from '../types/utils'
 
 export const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
-  size: ButtonGroupProps ['size']
+  size: ButtonGroupProps['size']
   orientation: ButtonGroupProps['orientation']
 }>> = Symbol('nuxt-ui.button-group')
 
diff --git a/src/theme/button-group.ts b/src/theme/button-group.ts
index 7d1c4d79..0dc1326a 100644
--- a/src/theme/button-group.ts
+++ b/src/theme/button-group.ts
@@ -21,6 +21,13 @@ export const buttonGroupVariantWithRoot = {
 export default {
   base: 'relative',
   variants: {
+    size: {
+      xs: '',
+      sm: '',
+      md: '',
+      lg: '',
+      xl: ''
+    },
     orientation: {
       horizontal: 'inline-flex -space-x-px',
       vertical: 'flex flex-col -space-y-px'