docs: new structure (#1282)

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

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>
 

docs/components/content/examples/SlideoverExampleDisableTransition.vue

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

docs/components/content/examples/SlideoverExamplePreventClose.vue

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

docs/components/content/examples/TableExampleBasic.vue

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

docs/components/content/examples/TableExampleClickable.vue

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

docs/components/content/examples/TableExampleColumns.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const columns = [{
   key: 'id',
   label: 'ID'