docs: new structure (#1282)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/app.vue

@@ -1,6 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
+    <NuxtLoadingIndicator />
+
     <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
@@ -10,7 +12,7 @@
     <Footer v-if="!$route.path.startsWith('/examples')" />
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 1000 }" />
     </ClientOnly>
 
     <UNotifications>
@@ -30,7 +32,7 @@ const searchRef = ref()
 
 const route = useRoute()
 const colorMode = useColorMode()
-const { branch, branches } = useContentSource()
+const { branch } = useContentSource()
 
 const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
@@ -51,51 +53,28 @@ const navigation = computed(() => {
   return nav.value.filter(item => item._path !== '/dev')
 })
 
-const groups = computed(() => {
-  if (route.path === '/') {
-    return []
-  }
-
-  return [{ key: 'branch', label: 'Branch', commands: branches.value }]
-})
-
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const links = computed(() => {
   return [{
-    label: 'Documentation',
+    label: 'Docs',
     icon: 'i-heroicons-book-open',
-    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Roadmap',
-    icon: 'i-heroicons-academic-cap',
-    to: '/roadmap'
-  }, !!navigation.value.find(item => item._path === '/pro') && {
+    to: branch.value?.name === 'dev' ? '/dev/getting-started' : '/getting-started',
+    active: branch.value?.name === 'dev' ? (route.path.startsWith('/dev/getting-started') || route.path.startsWith('/dev/components')) : (route.path.startsWith('/getting-started') || route.path.startsWith('/components'))
+  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
     label: 'Pro',
     icon: 'i-heroicons-square-3-stack-3d',
     to: '/pro',
-    children: [{
-      label: 'Features',
-      to: '/pro',
-      exact: true,
-      icon: 'i-heroicons-beaker',
-      description: 'Discover all the features of Nuxt UI Pro.'
-    }, {
-      label: 'Guide',
-      to: '/pro/guide',
-      icon: 'i-heroicons-book-open',
-      description: 'Learn how to use Nuxt UI Pro in your app.'
-    }, {
-      label: 'Components',
-      to: '/pro/components',
-      icon: 'i-heroicons-cube-transparent',
-      description: 'Discover all the components available in Nuxt UI Pro.'
-    }]
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components')
   }, {
+    label: 'Pricing',
+    icon: 'i-heroicons-credit-card',
+    to: '/pro/pricing'
+  }, {
+    label: 'Templates',
+    icon: 'i-heroicons-computer-desktop',
+    to: '/pro/templates'
+  }] : []), {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
     to: '/releases'

docs/components/BranchSelect.vue

@@ -1,36 +1,34 @@
 <template>
   <div class="mb-3 lg:mb-6">
-    <label for="branch" class="block mb-1.5 font-semibold text-sm/6">Version</label>
-
-    <USelectMenu
-      id="branch"
-      :model-value="branch"
-      name="branch"
-      :options="branches"
+    <UDropdown
+      class="w-full"
+      :items="[branches]"
       color="gray"
-      :ui="{ icon: { trailing: { padding: { sm: 'pe-1.5' } } } }"
-      :ui-menu="{ option: { container: 'gap-1.5' } }"
-      @update:model-value="select"
+      mode="hover"
+      :ui="{ width: 'w-full' }"
+      :popper="{ strategy: 'absolute', placement: 'bottom' }"
     >
-      <template #label>
+      <UButton color="gray" class="w-full">
         <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
 
-        <span class="font-medium">{{ branch.label }}</span>
+        <span class="text-gray-900 dark:text-white">{{ branch.label }}</span>
 
-        <span class="truncate text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+        <span class="text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+
+        <UIcon name="i-heroicons-chevron-down-20-solid" class="w-5 h-5 text-gray-400 dark:text-gray-500 ml-auto -mr-1" />
+      </UButton>
+
+      <template #item="{ item }">
+        <UIcon v-if="item.icon" :name="item.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span>{{ item.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ item.suffix }}</span>
       </template>
-
-      <template #option="{ option }">
-        <UIcon v-if="option.icon" :name="option.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
-
-        <span class="font-medium">{{ option.label }}</span>
-
-        <span class="truncate text-gray-400 dark:text-gray-500">{{ option.suffix }}</span>
-      </template>
-    </USelectMenu>
+    </UDropdown>
   </div>
 </template>
 
 <script setup lang="ts">
-const { branches, branch, select } = useContentSource()
+const { branches, branch } = useContentSource()
 </script>

docs/components/Footer.vue

@@ -5,21 +5,19 @@
     </div>
   </div>
 
-  <UFooter>
+  <UFooter :links="links">
     <template #left>
-      <a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
-        Purchase Nuxt UI Pro
-      </a>
-      <span v-else class="text-sm text-gray-500 dark:text-gray-400">
-        Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
-          MIT License
-        </NuxtLink>
-      </span>
+      <NuxtLink v-if="$route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Purchase <span class="text-gray-900 dark:text-white">Nuxt UI Pro</span>
+      </NuxtLink>
+      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Published under <span class="text-gray-900 dark:text-white">MIT License</span>
+      </NuxtLink>
     </template>
 
     <template #right>
       <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($ui.button.secondary as any)" />
-      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/invite/ps2h6QT" target="_blank" v-bind="($ui.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://chat.nuxt.dev" target="_blank" v-bind="($ui.button.secondary as any)" />
       <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($ui.button.secondary as any)" />
       <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($ui.button.secondary as any)" />
     </template>
@@ -27,5 +25,23 @@
 </template>
 
 <script setup lang="ts">
-// force typescript
+const links = [{
+  icon: 'i-simple-icons-figma',
+  label: 'Figma Kit',
+  to: 'https://www.figma.com/community/file/1288455405058138934/nuxt-ui',
+  target: '_blank'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxt-ui',
+  target: '_blank'
+}, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch',
+  to: '/releases'
+}]
 </script>

docs/components/Header.vue

@@ -7,8 +7,10 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
         <Logo class="w-auto h-6" />
+
+        <UBadge v-if="$route.path.startsWith('/pro')" label="Pro" variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold" />
       </NuxtLink>
     </template>
 
@@ -33,9 +35,9 @@
     <template #panel>
       <UAsideLinks :links="links" />
 
-      <UDivider type="dashed" class="mt-4 mb-3" />
+      <UDivider type="dashed" class="my-4" />
 
-      <BranchSelect v-if="!route.path.startsWith('/pro')" />
+      <BranchSelect />
 
       <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
     </template>

docs/components/ads/AdsPro.vue

@@ -5,8 +5,8 @@
     </NuxtLink>
 
     <UColorModeImage
-      light="/pro/illustrations/docs-light.svg"
-      dark="/pro/illustrations/docs-dark.svg"
+      light="/illustrations/pro-light.svg"
+      dark="/illustrations/pro-dark.svg"
       alt="Nuxt UI Pro"
       loading="lazy"
       class="w-full"
@@ -16,7 +16,7 @@
       <div class="inline-flex gap-1.5">
         <Logo class="h-4 w-auto" />
 
-        <UBadge variant="subtle" size="xs" label="Pro" class="font-semibold" />
+        <UBadge variant="subtle" size="xs" label="Pro" class="font-semibold rounded" />
       </div>
 
       <p class="text-sm text-gray-500 dark:text-gray-400 group-hover/ad:text-gray-700 dark:group-hover/ad:text-gray-200 mt-1 transition-colors">

docs/components/content/examples/AccordionExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',

docs/components/content/examples/AccordionExampleDefaultSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',

docs/components/content/examples/AccordionExampleItemSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   label: 'Getting Started',
   icon: 'i-heroicons-information-circle',

docs/components/content/examples/BreadcrumbExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   icon: 'i-heroicons-home',

docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   to: '/'

docs/components/content/examples/BreadcrumbExampleDividerSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   icon: 'i-heroicons-home',

docs/components/content/examples/BreadcrumbExampleIconSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const links = [{
   label: 'Home',
   to: '/'

docs/components/content/examples/CheckboxExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const selected = ref(true)
 </script>
 

docs/components/content/examples/ChipExampleShow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [{
   name: 'messages',
   icon: 'i-heroicons-chat-bubble-oval-left',

docs/components/content/examples/CommandPaletteExampleAsync.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const groups = [{
   key: 'users',
   label: q => q && `Users matching “${q}”...`,
@@ -7,7 +7,7 @@ const groups = [{
       return []
     }
 
-    const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+    const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
     return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
   }

docs/components/content/examples/CommandPaletteExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { id: 1, label: 'Wade Cooper' },
   { id: 2, label: 'Arlene Mccoy' },

docs/components/content/examples/CommandPaletteExampleFilter.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { id: 1, label: 'Wade Cooper', child: true },
   { id: 2, label: 'Arlene Mccoy' },

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const router = useRouter()
 const toast = useToast()
 

docs/components/content/examples/CommandPaletteExampleModal.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 
 const people = [

docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue

@@ -1,8 +1,11 @@
-<script setup>
+<script setup lang="ts">
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { Button } from '#ui/types'
+
 const commandPaletteRef = ref()
 
-const navigation = inject('navigation')
-const files = inject('files')
+const navigation = inject<Ref<NavItem[]>>('navigation')
+const files = inject<Ref<ParsedContent[]>>('files')
 
 const groups = computed(() => navigation.value.map(item => ({
   key: item._path,
@@ -63,8 +66,8 @@ const ui = {
     ref="commandPaletteRef"
     :groups="groups"
     :ui="ui"
-    :close-button="closeButton"
-    :empty-state="emptyState"
+    :close-button="(closeButton as Button)"
+    :empty-state="(emptyState as any)"
     :autoselect="false"
     command-attribute="title"
     :fuse="{

docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const commandPaletteRef = ref()
 
 const suggestions = [

docs/components/content/examples/ContextMenuExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/ContextMenuExampleArrow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/ContextMenuExampleOffset.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/ContextMenuExamplePlacement.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { x, y } = useMouse()
 const { y: windowY } = useWindowScroll()
 

docs/components/content/examples/DatePickerExample.vue

@@ -1,16 +1,15 @@
-<script setup>
-const date = ref(new Date())
+<script setup lang="ts">
+import { format } from 'date-fns'
 
-const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
-)
+const date = ref(new Date())
 </script>
 
 <template>
   <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
+    <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />
 
     <template #panel="{ close }">
-      <LazyDatePicker v-model="date" @close="close" />
+      <DatePicker v-model="date" @close="close" />
     </template>
   </UPopover>
 </template>

docs/components/content/examples/DatePickerRangeExample.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { sub, format, isSameDay, type Duration } from 'date-fns'
+
+const ranges = [
+  { label: 'Last 7 days', duration: { days: 7 } },
+  { label: 'Last 14 days', duration: { days: 14 } },
+  { label: 'Last 30 days', duration: { days: 30 } },
+  { label: 'Last 3 months', duration: { months: 3 } },
+  { label: 'Last 6 months', duration: { months: 6 } },
+  { label: 'Last year', duration: { years: 1 } }
+]
+const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })
+
+function isRangeSelected (duration: Duration) {
+  return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
+}
+
+function selectRange (duration: Duration) {
+  selected.value = { start: sub(new Date(), duration), end: new Date() }
+}
+</script>
+
+<template>
+  <UPopover :popper="{ placement: 'bottom-start' }">
+    <UButton icon="i-heroicons-calendar-days-20-solid">
+      {{ format(selected.start, 'd MMM, yyy') }} - {{ format(selected.end, 'd MMM, yyy') }}
+    </UButton>
+
+    <template #panel="{ close }">
+      <div class="flex items-center divide-x divide-gray-200 dark:divide-gray-800">
+        <div class="flex flex-col py-4">
+          <UButton
+            v-for="(range, index) in ranges"
+            :key="index"
+            :label="range.label"
+            color="gray"
+            variant="ghost"
+            class="rounded-none px-6"
+            :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
+            @click="selectRange(range.duration)"
+          />
+        </div>
+
+        <DatePicker v-model="selected" @close="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/DividerExampleOrientation.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const form = reactive({ email: 'mail@example.com', password: 'password' })
 </script>
 

docs/components/content/examples/DropdownExampleArrow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleMode.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleOffset.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleOpen.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExamplePlacement.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'Profile',

docs/components/content/examples/DropdownExampleSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const items = [
   [{
     label: 'ben@example.com',

docs/components/content/examples/FormGroupEagerValidationExample.vue

@@ -6,7 +6,7 @@
   </UForm>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { z } from 'zod'
 
 const schema = z.object({

docs/components/content/examples/HorizontalNavigationExample.vue

@@ -14,11 +14,11 @@ const links = [{
 }, {
   label: 'Horizontal Navigation',
   icon: 'i-heroicons-chart-bar',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
 }, {
   label: 'Command Palette',
   icon: 'i-heroicons-command-line',
-  to: '/navigation/command-palette'
+  to: '/components/command-palette'
 }]
 </script>
 

docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue

@@ -3,13 +3,13 @@ const route = useRoute()
 
 const links = [{
   label: 'Horizontal Navigation',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
 }, {
   label: 'Command Palette',
-  to: '/navigation/command-palette'
+  to: '/components/command-palette'
 }, {
   label: 'Table',
-  to: '/data/table'
+  to: '/components/table'
 }]
 </script>
 

docs/components/content/examples/HorizontalNavigationExampleSections.vue

@@ -9,11 +9,11 @@ const links = [
   }, {
     label: 'Horizontal Navigation',
     icon: 'i-heroicons-chart-bar',
-    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
   }, {
     label: 'Command Palette',
     icon: 'i-heroicons-command-line',
-    to: '/navigation/command-palette'
+    to: '/components/command-palette'
   }], [{
     label: 'Examples',
     icon: 'i-heroicons-light-bulb'

docs/components/content/examples/InputExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const value = ref('')
 </script>
 

docs/components/content/examples/InputMenuExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/InputMenuExampleEmptySlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = []
 
 const selected = ref()

docs/components/content/examples/InputMenuExampleObjects.vue

@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import type { Avatar } from '#ui/types'
+
 const people = [{
   id: 'benjamincanac',
   label: 'benjamincanac',
@@ -29,8 +31,8 @@ const selected = ref(people[0])
 <template>
   <UInputMenu v-model="selected" :options="people">
     <template #leading>
-      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4 mx-0.5" />
-      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
+      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
     </template>
   </UInputMenu>
 </template>

docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Wade Cooper'

docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/InputMenuExampleOptionSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { name: 'Wade Cooper', online: true },
   { name: 'Arlene Mccoy', online: false },

docs/components/content/examples/InputMenuExamplePopperArrow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/InputMenuExamplePopperOffset.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/InputMenuExamplePopperPlacement.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/InputMenuExampleSearchAsync.vue

@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 const loading = ref(false)
 const selected = ref()
 
-async function search (q) {
+async function search (q: string) {
   loading.value = true
 
-  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
   loading.value = false
 

docs/components/content/examples/InputMenuExampleSearchAttributes.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [
   { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
   { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },

docs/components/content/examples/InputMenuExampleSearchQuery.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref()

docs/components/content/examples/KbdExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const { metaSymbol } = useShortcuts()
 </script>
 

docs/components/content/examples/MeterSlotIndicatorExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const used = ref(84.2)
 
 const total = 238.42

docs/components/content/examples/MeterSlotLabelExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const used = ref(84.2)
 
 const total = 238.42

docs/components/content/examples/ModalExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleDisableOverlay.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleDisableTransition.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExampleFullscreen.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/ModalExamplePreventClose.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/NotificationExampleActions.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 const actions = ref([{

docs/components/content/examples/NotificationExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 </script>
 

docs/components/content/examples/NotificationExampleCallback.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 function onCallback () {

docs/components/content/examples/NotificationExampleClick.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 
 function onClick () {

docs/components/content/examples/NotificationExampleHtml.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const toast = useToast()
 </script>
 

docs/components/content/examples/PaginationExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const items = ref(Array(55))
 </script>

docs/components/content/examples/PaginationExampleFirstLastSlots.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const items = ref(Array(55))
 </script>

docs/components/content/examples/PaginationExamplePrevNextSlots.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const items = ref(Array(55))
 </script>

docs/components/content/examples/PaginationExampleRTL.vue

@@ -1,68 +0,0 @@
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <div class="w-full divide-y divide-gray-200 dark:divide-gray-700 space-y-4">
-    <div class="flex flex-wrap gap-1 justify-between w-full">
-      <div dir="ltr">
-        <UInput
-          icon="i-heroicons-magnifying-glass-20-solid"
-          size="sm"
-          color="white"
-          placeholder="Search..."
-          :trailing="false"
-        />
-      </div>
-
-      <div dir="rtl">
-        <UInput
-          icon="i-heroicons-magnifying-glass-20-solid"
-          size="sm"
-          color="white"
-          placeholder="ابحث..."
-          :trailing="false"
-        />
-      </div>
-    </div>
-
-    <div class="flex flex-wrap gap-1 justify-between w-full pt-4">
-      <div dir="ltr">
-        <UPagination
-          v-model="page"
-          :total="items.length"
-          :prev-button="{
-            icon: 'i-heroicons-arrow-small-left-20-solid',
-            label: 'Prev',
-            color: 'gray'
-          }"
-          :next-button="{
-            icon: 'i-heroicons-arrow-small-right-20-solid',
-            trailing: true,
-            label: 'Next',
-            color: 'gray'
-          }"
-        />
-      </div>
-
-      <div dir="rtl">
-        <UPagination
-          v-model="page"
-          :total="items.length"
-          :prev-button="{
-            icon: 'i-heroicons-arrow-small-left-20-solid',
-            label: 'السابق',
-            color: 'gray'
-          }"
-          :next-button="{
-            icon: 'i-heroicons-arrow-small-right-20-solid',
-            trailing: true,
-            label: 'التالي',
-            color: 'gray'
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>

docs/components/content/examples/PaginationExampleThemeRounded.vue

@@ -1,21 +0,0 @@
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination
-    v-model="page"
-    :total="items.length"
-    :ui="{
-      wrapper: 'flex items-center gap-1',
-      rounded: '!rounded-full min-w-[32px] justify-center'
-    }"
-    :prev-button="null"
-    :next-button="{
-      icon: 'i-heroicons-arrow-small-right-20-solid',
-      color: 'primary',
-      variant: 'outline'
-    }"
-  />
-</template>

docs/components/content/examples/PopoverExampleOpen.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const open = ref(true)
 
 defineShortcuts({

docs/components/content/examples/ProgressExampleSlotIndicator.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const temp = ref(35)
 
 const color = computed(() => {

docs/components/content/examples/ProgressExampleSlotStep.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const task = ref(1)
 
 const steps = [

docs/components/content/examples/RadioExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const methods = [
   { value: 'email', label: 'Email' },
   { value: 'sms', label: 'Phone (SMS)' },

docs/components/content/examples/RadioGroupExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [{
   value: 'email',
   label: 'Email'

docs/components/content/examples/RadioGroupLabelExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [
   { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
   { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },

docs/components/content/examples/RangeExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const value = ref(50)
 </script>
 

docs/components/content/examples/SelectExample.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const countries = ['United States', 'Canada', 'Mexico']
 
 const country = ref(countries[0])

docs/components/content/examples/SelectExampleObjects.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const countries = [{
   name: 'United States',
   value: 'US'

docs/components/content/examples/SelectMenuExampleArrow.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/SelectMenuExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/SelectMenuExampleButton.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[3])

docs/components/content/examples/SelectMenuExampleCreatable.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = ref([
   { id: 1, name: 'bug', color: 'd73a4a' },
   { id: 2, name: 'documentation', color: '0075ca' },

docs/components/content/examples/SelectMenuExampleCreatableAlways.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = ref([
   { id: 1, name: 'bug' },
   { id: 2, name: 'documentation' },

docs/components/content/examples/SelectMenuExampleEmptySlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = []
 
 const selected = ref()

docs/components/content/examples/SelectMenuExampleMultiple.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref([])

docs/components/content/examples/SelectMenuExampleMultipleSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref([])

docs/components/content/examples/SelectMenuExampleObjects.vue

@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import type { Avatar } from '#ui/types'
+
 const people = [{
   id: 'benjamincanac',
   label: 'benjamincanac',
@@ -29,8 +31,8 @@ const selected = ref(people[0])
 <template>
   <USelectMenu v-model="selected" :options="people">
     <template #leading>
-      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4 mx-0.5" />
-      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
+      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
+      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
     </template>
   </USelectMenu>
 </template>

docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [{
   id: 1,
   name: 'Wade Cooper'

docs/components/content/examples/SelectMenuExampleOffset.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/SelectMenuExampleOptionSlot.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = [
   { name: 'Wade Cooper', online: true },
   { name: 'Arlene Mccoy', online: false },

docs/components/content/examples/SelectMenuExamplePlacement.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref(people[0])

docs/components/content/examples/SelectMenuExampleSearchAsync.vue

@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 const loading = ref(false)
 const selected = ref([])
 
-async function search (q) {
+async function search (q: string) {
   loading.value = true
 
-  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
   loading.value = false
 

docs/components/content/examples/SelectMenuExampleSearchAttributes.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const options = [
   { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
   { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },

docs/components/content/examples/SelectMenuExampleSearchQuery.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 
 const selected = ref()

docs/components/content/examples/SlideoverExampleBasic.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/SlideoverExampleCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>
 

docs/components/content/examples/SlideoverExampleDisableOverlay.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const isOpen = ref(false)
 </script>