Fix circular component types

packages/@headlessui-vue/src/components/dialog/dialog.test.ts

@@ -1,4 +1,11 @@
-import { defineComponent, ref, nextTick, h, ComponentOptionsWithoutProps } from 'vue'
+import {
+  defineComponent,
+  ref,
+  nextTick,
+  h,
+  ComponentOptionsWithoutProps,
+  ConcreteComponent,
+} from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 
 import { Dialog, DialogOverlay, DialogTitle, DialogDescription } from './dialog'
@@ -931,7 +938,7 @@ describe('Mouse interactions', () => {
 })
 
 describe('Nesting', () => {
-  let Nested = defineComponent({
+  let Nested: ConcreteComponent = defineComponent({
     components: { Dialog, DialogOverlay },
     emits: ['close'],
     props: ['level'],

packages/@headlessui-vue/src/components/transitions/transition.ts

@@ -13,6 +13,7 @@ import {
   // Types
   InjectionKey,
   Ref,
+  ConcreteComponent,
 } from 'vue'
 
 import { useId } from '../../hooks/use-id'
@@ -341,6 +342,9 @@ export let TransitionChild = defineComponent({
 
 // ---
 
+// This exists to work around typescript circular inference problem
+let _TransitionChild = TransitionChild as ConcreteComponent
+
 export let TransitionRoot = defineComponent({
   inheritAttrs: false,
   props: {
@@ -423,7 +427,7 @@ export let TransitionRoot = defineComponent({
           ...slots,
           default: () => [
             h(
-              TransitionChild,
+              _TransitionChild,
               {
                 onBeforeEnter: () => emit('beforeEnter'),
                 onAfterEnter: () => emit('afterEnter'),