From 54e6d6b568d7799e5d546e0382d2e82ec4b5bf55 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Sun, 19 Nov 2023 14:55:49 -0600
Subject: [PATCH 1/7] fix: button group works with nested elements

---
 playground/app.vue                            | 60 +++++++++++---
 src/runtime/components/elements/Badge.vue     |  7 +-
 src/runtime/components/elements/Button.vue    | 19 +++--
 .../components/elements/ButtonGroup.ts        | 66 ++++++----------
 src/runtime/components/forms/Input.vue        |  9 ++-
 src/runtime/components/forms/Select.vue       |  9 ++-
 src/runtime/components/forms/SelectMenu.vue   |  9 ++-
 src/runtime/composables/useButtonGroup.ts     | 79 +++++++++++++++++++
 8 files changed, 193 insertions(+), 65 deletions(-)
 create mode 100644 src/runtime/composables/useButtonGroup.ts

diff --git a/playground/app.vue b/playground/app.vue
index 5c8f5a2b52..2f676ccacb 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,19 +1,59 @@
 <template>
   <UContainer class="min-h-screen flex items-center">
-    <UCard class="flex-1" :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50', ring: 'ring-1 ring-gray-300 dark:ring-gray-700', divide: 'divide-y divide-gray-300 dark:divide-gray-700', header: { base: 'font-bold' } }">
-      <template #header>
-        Welcome to the playground!
-      </template>
-
-      <p class="text-gray-500 dark:text-gray-400">
-        Try your components here!
-      </p>
-    </UCard>
+        <UButtonGroup size="lg" orientation="horizontal">
+          <UButton label="Action" color="white" />
+          <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+            <UButton class="w-full" color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+          </UDropdown>
+          <UInput placeholder="Search" />
+          <UBadge label="New" color="blue" />
+          <USelect :options="['All', 'Active', 'Completed']" placeholder="Select" />
+          <USelectMenu :options="['All', 'Active', 'Completed']" placeholder="Select Menu" />
+        </UButtonGroup>
+        <!-- <div class="flex gap-2">
+          <UButton label="Action" color="white" />
+          <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+            <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+          </UDropdown>
+          <UBadge label="New" color="blue" />
+          <UInput placeholder="Search" />
+          <USelect :options="['All', 'Active', 'Completed']" placeholder="Select" />
+          <USelectMenu :options="['All', 'Active', 'Completed']" placeholder="Select Menu" />
+        </div> -->
   </UContainer>
 </template>
 
 <script setup>
-
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }], [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid',
+    shortcuts: ['E'],
+    click: () => {
+      console.log('Edit')
+    }
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid',
+    shortcuts: ['D'],
+    disabled: true
+  }], [{
+    label: 'Archive',
+    icon: 'i-heroicons-archive-box-20-solid'
+  }, {
+    label: 'Move',
+    icon: 'i-heroicons-arrow-right-circle-20-solid'
+  }], [{
+    label: 'Delete',
+    icon: 'i-heroicons-trash-20-solid',
+    shortcuts: ['⌘', 'D']
+  }]
+]
 </script>
 
 <style>
diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index eb7f8cd78d..d90640e082 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -10,6 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
+import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -60,14 +61,16 @@ export default defineComponent({
   setup (props) {
     const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config)
 
+    const { size, rounded } = useInjectButtonGroup({ ui, props })
+
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
+        rounded.value,
+        ui.value.size[size.value],
         variant?.replaceAll('{color}', props.color)
       ), props.class)
     })
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index ff6bc0d6e8..8bee8a0fb7 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -17,13 +17,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRef } from 'vue'
+import { computed, defineComponent, toRef, inject } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
+import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -130,6 +131,10 @@ export default defineComponent({
   setup (props, { slots }) {
     const { ui, attrs } = useUI('button', toRef(props, 'ui'), config)
 
+    const { size, rounded } = useInjectButtonGroup({ ui, props })
+
+    const buttonSize = computed(() => size.value || props.size)
+
     const isLeading = computed(() => {
       return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
     })
@@ -146,10 +151,10 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
-        ui.value.gap[props.size],
-        props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
+        rounded.value,
+        ui.value.size[size.value],
+        ui.value.gap[size.value],
+        props.padded && ui.value[isSquare.value ? 'square' : 'padding'][size.value],
         variant?.replaceAll('{color}', props.color),
         props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
       ), props.class)
@@ -174,7 +179,7 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && 'animate-spin'
       )
     })
@@ -182,7 +187,7 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && !isLeading.value && 'animate-spin'
       )
     })
diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index b715507f08..9032ce8eff 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -1,8 +1,9 @@
-import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
+import { h, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
+import { useProvideButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -12,11 +13,12 @@ const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig
 const buttonGroupConfig = mergeConfig<typeof buttonGroup>(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup)
 
 export default defineComponent({
+  name: 'ButtonGroup',
   inheritAttrs: false,
   props: {
     size: {
       type: String as PropType<ButtonSize>,
-      default: null,
+      default: buttonConfig.default.size,
       validator (value: string) {
         return Object.keys(buttonConfig.size).includes(value)
       }
@@ -42,51 +44,35 @@ export default defineComponent({
 
     const children = computed(() => getSlotsChildren(slots))
 
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper[props.orientation],
+        ui.value.shadow
+      ), props.class)
+    })
+
     const rounded = computed(() => {
       const roundedMap = {
-        'rounded-none': { horizontal: { left: 'rounded-s-none', right: 'rounded-e-none' }, vertical: { top: 'rounded-t-none', bottom: 'rounded-b-none' } },
-        'rounded-sm': { horizontal: { left: 'rounded-s-sm', right: 'rounded-e-sm' }, vertical: { top: 'rounded-t-sm', bottom: 'rounded-b-sm' } },
-        rounded: { horizontal: { left: 'rounded-s', right: 'rounded-e' }, vertical: { top: 'rounded-t', bottom: 'rounded-b' } },
-        'rounded-md': { horizontal: { left: 'rounded-s-md', right: 'rounded-e-md' }, vertical: { top: 'rounded-t-md', bottom: 'rounded-b-md' } },
-        'rounded-lg': { horizontal: { left: 'rounded-s-lg', right: 'rounded-e-lg' }, vertical: { top: 'rounded-t-lg', bottom: 'rounded-b-lg' } },
-        'rounded-xl': { horizontal: { left: 'rounded-s-xl', right: 'rounded-e-xl' }, vertical: { top: 'rounded-t-xl', bottom: 'rounded-b-xl' } },
-        'rounded-2xl': { horizontal: { left: 'rounded-s-2xl', right: 'rounded-e-2xl' }, vertical: { top: 'rounded-t-2xl', bottom: 'rounded-b-2xl' } },
-        'rounded-3xl': { horizontal: { left: 'rounded-s-3xl', right: 'rounded-e-3xl' }, vertical: { top: 'rounded-t-3xl', bottom: 'rounded-b-3xl' } },
-        'rounded-full': { horizontal: { left: 'rounded-s-full', right: 'rounded-e-full' }, vertical: { top: 'rounded-t-full', bottom: 'rounded-b-full' } }
+        'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
+        'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
+        rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
+        'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
+        'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
+        'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
+        'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
+        'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
+        'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
       }
       return roundedMap[ui.value.rounded][props.orientation]
     })
 
-    const clones = computed(() => children.value.map((node, index) => {
-      const vProps: any = {}
-
-      if (props.size) {
-        vProps.size = props.size
-      }
-
-      vProps.ui = node.props?.ui || {}
-      vProps.ui.rounded = 'rounded-none'
-      vProps.ui.base = '!shadow-none'
-
-      if (index === 0) {
-        vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`
-      }
-
-      if (index === children.value.length - 1) {
-        vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`
-      }
-
-      return cloneVNode(node, vProps)
-    }))
-
-    const wrapperClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.wrapper[props.orientation],
-        ui.value.rounded,
-        ui.value.shadow
-      ), props.class)
+    useProvideButtonGroup({
+      orientation: props.orientation,
+      size: props.size,
+      ui: ui.value,
+      rounded: rounded.value
     })
 
-    return () => h('div', { class: wrapperClass.value, ...attrs.value }, clones.value)
+    return () => h('div', { class: wrapperClass.value, ...attrs.value }, children.value)
   }
 })
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 2da9bcb19d..840843ebcd 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -41,6 +41,7 @@ import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, looseToNumber } from '../../utils'
+import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -167,7 +168,11 @@ export default defineComponent({
   setup (props, { emit, slots }) {
     const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const { emitFormBlur, emitFormInput, size, color, inputId, name } = useFormGroup(props, config)
+    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
+
+    const { emitFormBlur, emitFormInput, size: sizeFormGroup, color, inputId, name } = useFormGroup(props, config)
+
+    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
     const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))
 
@@ -229,7 +234,7 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
-        ui.value.rounded,
+        rounded.value,
         ui.value.placeholder,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : 'p-0',
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 89d84d18f5..9dbe4f1922 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -61,6 +61,7 @@ import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig, get } from '../../utils'
+import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -183,7 +184,11 @@ export default defineComponent({
   setup (props, { emit, slots }) {
     const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config)
+    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
+
+    const { emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
+
+    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
     const onInput = (event: InputEvent) => {
       emit('update:modelValue', (event.target as HTMLInputElement).value)
@@ -251,7 +256,7 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
-        ui.value.rounded,
+        rounded.value,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', color.value),
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 21fbfa5b6b..f927fa2eee 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -141,6 +141,7 @@ import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
+import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -320,7 +321,11 @@ export default defineComponent({
     const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
 
     const [trigger, container] = usePopper(popper.value)
-    const { emitFormBlur, emitFormChange, inputId, color, size, name } = useFormGroup(props, config)
+
+    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
+    const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
+
+    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
     const query = ref('')
     const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
@@ -330,7 +335,7 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
-        ui.value.rounded,
+        rounded.value,
         'text-left cursor-default',
         ui.value.size[size.value],
         ui.value.gap[size.value],
diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
new file mode 100644
index 0000000000..2bcbe3c3b2
--- /dev/null
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -0,0 +1,79 @@
+import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+import type { Ref, ComponentInternalInstance } from 'vue'
+import { button, buttonGroup } from '#ui/ui.config'
+
+type ButtonGroupProps = {
+  orientation?: 'horizontal' | 'vertical'
+  size?: string
+  ui?: Partial<typeof buttonGroup>
+  rounded?: { start: string, end: string }
+}
+
+// make a ButtonGroupContext type for injection. Should include ButtonGroupProps
+type ButtonGroupContext = ButtonGroupProps & {
+  children: ComponentInternalInstance[]
+  register(child: ComponentInternalInstance): void
+  unregister(child: ComponentInternalInstance): void
+  rounded: { start: string, end: string }
+}
+
+export function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps) {
+  const instance = getCurrentInstance()
+  const groupKey = `group-${instance.uid}`
+  const state = ref({
+    children: [],
+    register(child) {
+      this.children.push(child)
+    },
+    unregister(child) {
+      const index = this.children.indexOf(child)
+      if (index > -1) {
+        this.children.splice(index, 1)
+      }
+    },
+    rounded: buttonGroup.rounded,
+    ...buttonGroupProps
+  })
+  provide(groupKey, state as Ref<ButtonGroupContext>)
+}
+
+export function useInjectButtonGroup({ ui, props }: { ui: any, props: any }) {
+  const instance = getCurrentInstance()
+
+  let parent = instance.parent
+  let groupContext: Ref<ButtonGroupContext> | undefined
+
+  // Traverse up the parent chain to find the nearest ButtonGroup
+  while (parent && !groupContext) {
+    if (parent.type.name === 'ButtonGroup') {
+      groupContext = inject(`group-${parent.uid}`)
+      break;
+    }
+    parent = parent.parent;
+  }
+
+  const positionInGroup = computed(() => {
+    return groupContext?.value.children.indexOf(instance)
+  })
+  onMounted(() => {
+    groupContext?.value.register(instance)
+  })
+  onUnmounted(() => {
+    groupContext?.value.unregister(instance)
+  })
+  return {
+    size: computed(() => groupContext?.value.size || props.size),
+    rounded: computed(() => {
+      if (!groupContext) return ui.value.rounded
+      if (groupContext.value.children.length === 1) {
+        return groupContext.value.ui.rounded
+      } else if (positionInGroup.value === 0 || positionInGroup.value === -1) {
+        return groupContext.value.rounded.start
+      } else if (positionInGroup.value === groupContext.value.children.length - 1) {
+        return groupContext.value.rounded.end
+      } else {
+        return 'rounded-none'
+      }
+    })
+  }
+}

From 56b4b313d656a399142625020f76e64504865baf Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Sun, 19 Nov 2023 15:07:05 -0600
Subject: [PATCH 2/7] restoring playground app.vue

---
 playground/app.vue | 60 ++++++++--------------------------------------
 1 file changed, 10 insertions(+), 50 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index 2f676ccacb..5c8f5a2b52 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,59 +1,19 @@
 <template>
   <UContainer class="min-h-screen flex items-center">
-        <UButtonGroup size="lg" orientation="horizontal">
-          <UButton label="Action" color="white" />
-          <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
-            <UButton class="w-full" color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-          </UDropdown>
-          <UInput placeholder="Search" />
-          <UBadge label="New" color="blue" />
-          <USelect :options="['All', 'Active', 'Completed']" placeholder="Select" />
-          <USelectMenu :options="['All', 'Active', 'Completed']" placeholder="Select Menu" />
-        </UButtonGroup>
-        <!-- <div class="flex gap-2">
-          <UButton label="Action" color="white" />
-          <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
-            <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-          </UDropdown>
-          <UBadge label="New" color="blue" />
-          <UInput placeholder="Search" />
-          <USelect :options="['All', 'Active', 'Completed']" placeholder="Select" />
-          <USelectMenu :options="['All', 'Active', 'Completed']" placeholder="Select Menu" />
-        </div> -->
+    <UCard class="flex-1" :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50', ring: 'ring-1 ring-gray-300 dark:ring-gray-700', divide: 'divide-y divide-gray-300 dark:divide-gray-700', header: { base: 'font-bold' } }">
+      <template #header>
+        Welcome to the playground!
+      </template>
+
+      <p class="text-gray-500 dark:text-gray-400">
+        Try your components here!
+      </p>
+    </UCard>
   </UContainer>
 </template>
 
 <script setup>
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }], [{
-    label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E'],
-    click: () => {
-      console.log('Edit')
-    }
-  }, {
-    label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D'],
-    disabled: true
-  }], [{
-    label: 'Archive',
-    icon: 'i-heroicons-archive-box-20-solid'
-  }, {
-    label: 'Move',
-    icon: 'i-heroicons-arrow-right-circle-20-solid'
-  }], [{
-    label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid',
-    shortcuts: ['⌘', 'D']
-  }]
-]
+
 </script>
 
 <style>

From d492ff7656f6d4295df25d59accb8cbed4c64942 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Sun, 19 Nov 2023 15:09:40 -0600
Subject: [PATCH 3/7] lint fixes

---
 src/runtime/components/elements/Button.vue |  4 +---
 src/runtime/composables/useButtonGroup.ts  | 14 +++++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 8bee8a0fb7..ff0083012c 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRef, inject } from 'vue'
+import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
@@ -133,8 +133,6 @@ export default defineComponent({
 
     const { size, rounded } = useInjectButtonGroup({ ui, props })
 
-    const buttonSize = computed(() => size.value || props.size)
-
     const isLeading = computed(() => {
       return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
     })
diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
index 2bcbe3c3b2..cba9e66420 100644
--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -1,6 +1,6 @@
 import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import type { Ref, ComponentInternalInstance } from 'vue'
-import { button, buttonGroup } from '#ui/ui.config'
+import { buttonGroup } from '#ui/ui.config'
 
 type ButtonGroupProps = {
   orientation?: 'horizontal' | 'vertical'
@@ -17,15 +17,15 @@ type ButtonGroupContext = ButtonGroupProps & {
   rounded: { start: string, end: string }
 }
 
-export function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps) {
+export function useProvideButtonGroup (buttonGroupProps: ButtonGroupProps) {
   const instance = getCurrentInstance()
   const groupKey = `group-${instance.uid}`
   const state = ref({
     children: [],
-    register(child) {
+    register (child) {
       this.children.push(child)
     },
-    unregister(child) {
+    unregister (child) {
       const index = this.children.indexOf(child)
       if (index > -1) {
         this.children.splice(index, 1)
@@ -37,7 +37,7 @@ export function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps) {
   provide(groupKey, state as Ref<ButtonGroupContext>)
 }
 
-export function useInjectButtonGroup({ ui, props }: { ui: any, props: any }) {
+export function useInjectButtonGroup ({ ui, props }: { ui: any, props: any }) {
   const instance = getCurrentInstance()
 
   let parent = instance.parent
@@ -47,9 +47,9 @@ export function useInjectButtonGroup({ ui, props }: { ui: any, props: any }) {
   while (parent && !groupContext) {
     if (parent.type.name === 'ButtonGroup') {
       groupContext = inject(`group-${parent.uid}`)
-      break;
+      break
     }
-    parent = parent.parent;
+    parent = parent.parent
   }
 
   const positionInGroup = computed(() => {

From 7809ba56a20784c098ad86ccf8f88dd0b8f66723 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Sun, 19 Nov 2023 15:19:31 -0600
Subject: [PATCH 4/7] cleanup returns

---
 src/runtime/composables/useButtonGroup.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
index cba9e66420..5887b70e9b 100644
--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -65,15 +65,10 @@ export function useInjectButtonGroup ({ ui, props }: { ui: any, props: any }) {
     size: computed(() => groupContext?.value.size || props.size),
     rounded: computed(() => {
       if (!groupContext) return ui.value.rounded
-      if (groupContext.value.children.length === 1) {
-        return groupContext.value.ui.rounded
-      } else if (positionInGroup.value === 0 || positionInGroup.value === -1) {
-        return groupContext.value.rounded.start
-      } else if (positionInGroup.value === groupContext.value.children.length - 1) {
-        return groupContext.value.rounded.end
-      } else {
-        return 'rounded-none'
-      }
+      if (groupContext.value.children.length === 1) return groupContext.value.ui.rounded
+      if (positionInGroup.value === 0 || positionInGroup.value === -1) return groupContext.value.rounded.start
+      if (positionInGroup.value === groupContext.value.children.length - 1) return groupContext.value.rounded.end
+      return 'rounded-none'
     })
   }
 }

From 704cb81a9178cd4ce08b9984d8346c9b625d7db3 Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Sun, 19 Nov 2023 15:36:36 -0600
Subject: [PATCH 5/7] chore: cleanup

---
 src/runtime/composables/useButtonGroup.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
index 5887b70e9b..ac328f9713 100644
--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -52,9 +52,7 @@ export function useInjectButtonGroup ({ ui, props }: { ui: any, props: any }) {
     parent = parent.parent
   }
 
-  const positionInGroup = computed(() => {
-    return groupContext?.value.children.indexOf(instance)
-  })
+  const positionInGroup = computed(() => groupContext?.value.children.indexOf(instance))
   onMounted(() => {
     groupContext?.value.register(instance)
   })

From fdc140bcc813d4052fecc01fd7f3a10ad6af6c9d Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Mon, 20 Nov 2023 08:09:00 -0600
Subject: [PATCH 6/7] setting default ButtonGroup size back to null

---
 src/runtime/components/elements/ButtonGroup.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index 9032ce8eff..a0ec12545e 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -18,7 +18,7 @@ export default defineComponent({
   props: {
     size: {
       type: String as PropType<ButtonSize>,
-      default: buttonConfig.default.size,
+      default: null,
       validator (value: string) {
         return Object.keys(buttonConfig.size).includes(value)
       }

From 1363c32f2a88bf2d01da1e77d81cb0e8ccc659bd Mon Sep 17 00:00:00 2001
From: Conner Blanton <connerblanton@gmail.com>
Date: Mon, 20 Nov 2023 11:10:11 -0600
Subject: [PATCH 7/7] fix: Reactivity in ButtonGroup

---
 src/runtime/components/elements/ButtonGroup.ts |  8 ++------
 src/runtime/composables/useButtonGroup.ts      | 18 ++++++++++--------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index a0ec12545e..f5ed723cb5 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -47,6 +47,7 @@ export default defineComponent({
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper[props.orientation],
+        ui.value.rounded,
         ui.value.shadow
       ), props.class)
     })
@@ -66,12 +67,7 @@ export default defineComponent({
       return roundedMap[ui.value.rounded][props.orientation]
     })
 
-    useProvideButtonGroup({
-      orientation: props.orientation,
-      size: props.size,
-      ui: ui.value,
-      rounded: rounded.value
-    })
+    useProvideButtonGroup({ orientation: toRef(props, 'orientation'), size: toRef(props, 'size'), ui, rounded })
 
     return () => h('div', { class: wrapperClass.value, ...attrs.value }, children.value)
   }
diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
index ac328f9713..b567d22530 100644
--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -3,17 +3,20 @@ import type { Ref, ComponentInternalInstance } from 'vue'
 import { buttonGroup } from '#ui/ui.config'
 
 type ButtonGroupProps = {
-  orientation?: 'horizontal' | 'vertical'
-  size?: string
-  ui?: Partial<typeof buttonGroup>
-  rounded?: { start: string, end: string }
+  orientation?: Ref<'horizontal' | 'vertical'>
+  size?: Ref<string>
+  ui?: Ref<Partial<typeof buttonGroup>>
+  rounded?: Ref<{ start: string, end: string }>
 }
 
 // make a ButtonGroupContext type for injection. Should include ButtonGroupProps
-type ButtonGroupContext = ButtonGroupProps & {
+type ButtonGroupContext = {
   children: ComponentInternalInstance[]
   register(child: ComponentInternalInstance): void
   unregister(child: ComponentInternalInstance): void
+  orientation: 'horizontal' | 'vertical'
+  size: string
+  ui: Partial<typeof buttonGroup>
   rounded: { start: string, end: string }
 }
 
@@ -31,7 +34,6 @@ export function useProvideButtonGroup (buttonGroupProps: ButtonGroupProps) {
         this.children.splice(index, 1)
       }
     },
-    rounded: buttonGroup.rounded,
     ...buttonGroupProps
   })
   provide(groupKey, state as Ref<ButtonGroupContext>)
@@ -62,9 +64,9 @@ export function useInjectButtonGroup ({ ui, props }: { ui: any, props: any }) {
   return {
     size: computed(() => groupContext?.value.size || props.size),
     rounded: computed(() => {
-      if (!groupContext) return ui.value.rounded
+      if (!groupContext || positionInGroup.value === -1) return ui.value.rounded
       if (groupContext.value.children.length === 1) return groupContext.value.ui.rounded
-      if (positionInGroup.value === 0 || positionInGroup.value === -1) return groupContext.value.rounded.start
+      if (positionInGroup.value === 0) return groupContext.value.rounded.start
       if (positionInGroup.value === groupContext.value.children.length - 1) return groupContext.value.rounded.end
       return 'rounded-none'
     })