chore: improve types and imports

src/runtime/components/navigation/CommandPalette.vue

@@ -7,7 +7,7 @@
   >
     <div class="flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800">
       <div class="relative flex items-center">
-        <UIcon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
+        <Icon :name="inputIcon" class="pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
@@ -17,7 +17,7 @@
           @change="query = $event.target.value"
         />
 
-        <UButton v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
+        <Button v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
       </div>
 
       <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
@@ -29,7 +29,7 @@
       </ComboboxOptions>
 
       <div v-else class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
-        <UIcon :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400" aria-hidden="true" />
+        <Icon :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400" aria-hidden="true" />
         <p class="mt-4 text-sm u-text-gray-900">
           {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
         </p>
@@ -46,6 +46,8 @@ import { useFuse } from '@vueuse/integrations/useFuse'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
+import Icon from '../elements/Icon.vue'
+import Button from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 
 const props = defineProps({

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -15,8 +15,8 @@
       >
         <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div class="flex items-center flex-1 gap-3 min-w-0">
-            <UIcon v-if="command.icon" :name="command.icon" :class="['h-5 w-5 flex-shrink-0 text-opacity-40', active && 'text-opacity-100', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
-            <UAvatar
+            <Icon v-if="command.icon" :name="command.icon" :class="['h-5 w-5 flex-shrink-0 text-opacity-40', active && 'text-opacity-100', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
+            <Avatar
               v-else-if="command.avatar"
               v-bind="{ size: 'xxs', ...command.avatar }"
               class="flex-shrink-0"
@@ -32,7 +32,7 @@
             </div>
           </div>
 
-          <UIcon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 absolute right-2 u-text-gray-900" aria-hidden="true" />
+          <Icon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 absolute right-2 u-text-gray-900" aria-hidden="true" />
           <span v-else-if="active" class="flex-none u-text-gray-500">
             <slot :name="`${group.key}-active`" :group="group" :command="command">{{ group.active }}</slot>
           </span>
@@ -51,6 +51,8 @@
 <script setup lang="ts">
 import { ComboboxOption } from '@headlessui/vue'
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
+import Avatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
 
 defineProps({

src/runtime/components/navigation/Pills.vue

@@ -15,12 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import Link from '../elements/Link'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import Link from '../elements/Link.vue'
 import $ui from '#build/ui'
 
 defineProps({
   links: {
-    type: Array,
+    type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
     required: true
   },
   wrapperClass: {

src/runtime/components/navigation/Tabs.vue

@@ -15,12 +15,14 @@
 </template>
 
 <script setup lang="ts">
-import Link from '../elements/Link'
+import type { PropType } from 'vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import Link from '../elements/Link.vue'
 import $ui from '#build/ui'
 
 defineProps({
   links: {
-    type: Array,
+    type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
     required: true
   },
   wrapperClass: {

src/runtime/components/navigation/VerticalNavigation.vue

@@ -38,14 +38,23 @@
 </template>
 
 <script setup lang="ts">
-import Icon from '../elements/Icon'
-import Link from '../elements/Link'
-import Avatar from '../elements/Avatar'
+import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
+import Link from '../elements/Link.vue'
+import Avatar from '../elements/Avatar.vue'
+import type { Avatar as AvatarType } from '../../types/avatar'
 import $ui from '#build/ui'
 
 defineProps({
   links: {
-    type: Array,
+    type: Array as PropType<{
+      label: string
+      icon?: string
+      iconClass?: string
+      avatar?: Partial<AvatarType>
+      click?: Function
+      badge?: string
+    }[]>,
     required: true
   },
   wrapperClass: {