docs: improve

docs/.vitepress/components/SearchCommandBox.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-// @ts-expect-error internal function
-import localSearchIndex from '@localSearchIndex'
 // @ts-expect-error ignoring
 import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import { useData } from 'vitepress'
 import { DialogClose, type GenericComponentInstance, ListboxContent, ListboxFilter, ListboxItem, ListboxRoot } from 'reka-ui'
-import { type Ref, markRaw, nextTick, ref, shallowRef } from 'vue'
+import { type Ref, markRaw, nextTick, onMounted, ref, shallowRef, watch } from 'vue'
 import { computedAsync, debouncedWatch } from '@vueuse/core'
 import { LRUCache } from '../functions/cache'
 import { Icon } from '@iconify/vue'
@@ -20,7 +18,7 @@ const { localeIndex } = useData()
 const filterText = ref('')
 const enableNoResults = ref(false)
 const resultsEl = shallowRef<HTMLElement>()
-const searchIndexData = shallowRef(localSearchIndex)
+const searchIndexData = shallowRef()
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 const listboxRef = ref<GenericComponentInstance<typeof ListboxRoot>>()
 
@@ -30,14 +28,12 @@ interface Result {
   text?: string
 }
 
-// hmr
-if (import.meta.hot) {
-  import.meta.hot.accept('/@localSearchIndex', (m) => {
-    if (m) {
-      searchIndexData.value = m.default
-    }
+onMounted(() => {
+  // @ts-expect-error internal function
+  import('@localSearchIndex').then((m) => {
+    searchIndexData.value = m.default
   })
-}
+})
 
 const mark = computedAsync(async () => {
   if (!resultsEl.value)
@@ -113,13 +109,15 @@ debouncedWatch(
     })
 
     enableNoResults.value = true
-    // FIXME: without this whole page scrolls to the bottom
-    resultsEl.value?.firstElementChild?.scrollIntoView({ block: 'start' })
     listboxRef.value?.highlightFirstItem()
   },
   { debounce: 200, immediate: true },
 )
 
+watch(filterText, () => {
+  enableNoResults.value = false
+})
+
 function formMarkRegex(terms: Set<string>) {
   return new RegExp(
     [...terms]

docs/content/docs/components/tree.md

@@ -277,9 +277,11 @@ In `CustomTree.vue`
 
 By default, `<TreeRoot />` expects you to provide the list of node's children by passing a list of `children` for every node. You can override that by providing the `getChildren` prop.
 
-::: NOTE
+<Callout type="info">
+
 If the node doesn't have any children, `getChildren` should return `undefined` instead of an empty array.
-:::
+
+</Callout>
 
 ```vue line=22
 <script setup lang="ts">

docs/content/docs/guides/i18n.md

@@ -104,7 +104,7 @@ But first, let's install some required packages.
 
 We rely on [`VueI18n`](https://vue-i18n.intlify.dev/) to manage different translations we want to support.
 
-<InstallationTabs value="vue-i18n@9" />
+<InstallationTabs value="vue-i18n@latest" />
 
 Go ahead and add some translations for the word "hello" in different languages at `main.ts`.
 

docs/content/docs/guides/migration.md

@@ -17,26 +17,6 @@ First and foremost, you need to install the latest `reka-ui`.
 
 Congratulation! 🎉 Now that you've installed the above package, let's perform the migration! The first 2 steps are relatively simple. Just do a global search and replace for the following changes.
 
-#### Codemods
-
-To assist with the upgrade from Radix Vue to Reka UI, we collaborated with the [Codemod](https://github.com/codemod-com/codemod) team to automatically update your code to many of the new updates and patterns with [open-source codemods](https://go.codemod.com/reka-codemods). You can run the following command to automatically migrate to Reka UI:
-
-<Callout type="tip" title="Migration recipe">
-
-```bash
-npx codemod reka-ui/migration-recipe
-```
-
-</Callout>
-
-The [migration recipe](https://go.codemod.com/reka-recipe) will run the following codemods from the radix-vue Codemod repository:
-
-- [`reka-ui/import-update`](https://go.codemod.com/reka-import-update)
-- [`reka-ui/update-css-and-data-attributes`](https://go.codemod.com/reka-update-css-data)
-- [`reka-ui/update-combobox-filter`](https://go.codemod.com/update-combobox-filter)
-- [`reka-ui/rename-controlled-state`](https://go.codemod.com/rename-controlled-state)
-- [`reka-ui/remove-calendar-step-prop`](https://go.codemod.com/remove-calendar-step-prop)
-
 ## Import Statement Changes
 
 The primary change in imports is replacing `radix-vue` with `reka-ui`.
@@ -48,34 +28,18 @@ import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui' // [!code +
 </script>
 ```
 
-  <Callout type="tip" title="Codemod available">
-
-  ```bash
-  npx codemod reka-ui/import-update
-  ```
-
-  </Callout>
-
 ## Naming Convention Changes
 
 CSS variable and data attributes names have been updated to use the `reka` prefix instead of `radix`.
 
-```
-  --radix-accordion-content-width: 300px; // [!code --]
-  --reka-accordion-content-width: 300px;  // [!code ++]
+```css
+  --radix-accordion-content-width: 300px; /* [!code --] */
+  --reka-accordion-content-width: 300px; /* [!code ++] */
 
-  [data-radix-collection-item] {} // [!code --]
-  [data-reka-collection-item] {}  // [!code ++]
+  [data-radix-collection-item] {} /* [!code --] */
+  [data-reka-collection-item] {} /* [!code ++] */
 ```
 
-<Callout type="tip" title="Codemod available">
-
-```bash
-npx codemod reka-ui/update-css-and-data-attributes
-```
-
-</Callout>
-
 ## Component Breaking Changes
 
 ### Combobox
@@ -84,26 +48,18 @@ npx codemod reka-ui/update-css-and-data-attributes
 
   ```vue
   <template>
-    <ComboboxRoot :filter-function="customFilter" /> // [!code --]
+    <ComboboxRoot :filter-function="customFilter" />  <!-- [!code --] -->
   </template>
   ```
 
-  <Callout type="tip" title="Codemod available">
-
-  ```bash
-  npx codemod reka-ui/update-combobox-filter
-  ```
-
-  </Callout>
-
 - [Replace `searchTerm` props of Root to Input's `v-model`](https://github.com/unovue/reka-ui/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
 - [Move `displayValue` props from Root to Input](https://github.com/unovue/reka-ui/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
 
   ```vue
   <template>
-    <ComboboxRoot v-model:search-term="search" :display-value="(v) => v.name" /> // [!code --]
+    <ComboboxRoot v-model:search-term="search" :display-value="(v) => v.name" /> <!-- [!code --] -->
     <ComboboxRoot>
-      <ComboboxInput v-model="search" :display-value="(v) => v.name" /> // [!code ++]
+      <ComboboxInput v-model="search" :display-value="(v) => v.name" /> <!-- [!code ++] -->
     </ComboboxRoot>
   </template>
   ```
@@ -118,19 +74,11 @@ npx codemod reka-ui/update-css-and-data-attributes
 
   ```vue
   <template>
-    <CheckboxRoot v-model:checked="value" /> // [!code --]
-    <CheckboxRoot v-model="value" /> // [!code ++]
+    <CheckboxRoot v-model:checked="value" /> <!-- [!code --] -->
+    <CheckboxRoot v-model="value" /> <!-- [!code ++] -->
   </template>
   ```
 
-  <Callout type="tip" title="Codemod available">
-
-  ```bash
-  npx codemod reka-ui/rename-controlled-state
-  ```
-
-  </Callout>
-
 - [Reposition `VisuallyHidden`](https://github.com/unovue/reka-ui/commit/107389a9c230d2c94232887b9cbe2710222564aa) - Previously `VisuallyHidden` were position at the root node, causing style scoped to not be applied.
 
 ### Pagination
@@ -139,7 +87,7 @@ npx codemod reka-ui/update-css-and-data-attributes
 
   ```vue
   <template>
-    <PaginationRoot :items-per-page="10" />   // [!code ++]
+    <PaginationRoot :items-per-page="10" />  <!-- [!code ++] -->
   </template>
   ```
 
@@ -157,30 +105,22 @@ npx codemod reka-ui/update-css-and-data-attributes
   </script>
 
   <template>
-    <CalendarPrev step="year" /> // [!code --]
-    <CalendarPrev :prev-page="(date: DateValue) => pagingFunc(date, -1)" /> // [!code ++]
+    <CalendarPrev step="year" /> <!-- [!code --] -->
+    <CalendarPrev :prev-page="(date: DateValue) => pagingFunc(date, -1)" /> <!-- [!code ++] -->
 
-    <CalendarNext step="year" /> // [!code --]
-    <CalendarNext :next-page="(date: DateValue) => pagingFunc(date, 1)" /> // [!code ++]
+    <CalendarNext step="year" /> <!-- [!code --] -->
+    <CalendarNext :next-page="(date: DateValue) => pagingFunc(date, 1)" /> <!-- [!code ++] -->
   </template>
   ```
 
-  <Callout type="tip" title="Codemod available">
-
-  ```bash
-  npx codemod reka-ui/remove-calendar-step-prop
-  ```
-
-  </Callout>
-
 ### Select
 
 - [`SelectValue` no longer render teleported element](https://github.com/unovue/reka-ui/commit/6a623484d610cc3b7c1a23a77c253c8e95cef518) - Previous implmenentation of `SelectValue` will render the selected `SelectItem` via teleporting fragment. This causes SSR flickering, and it is unnecessarily computation.
 
   ```vue
   <template>
     <SelectValue>
-      <!-- render the content similar to `SelectItem` --> // [!code ++]
+      <!-- render the content similar to `SelectItem` --> <!-- [!code ++] -->
     </SelectValue>
   </template>
   ```

docs/content/docs/guides/namespaced-components.md

@@ -4,8 +4,6 @@ Reka UI design pattern is to create primitives for each component, and allow use
 
 However, importing all the necessary components 1-by-1 can be quite an effort, and the user might sometimes accidentally leave out an important component.
 
-In order to solve this pain point, we've introduced [Namespaced components](https://vuejs.org/api/sfc-script-setup.html#namespaced-components) starting from [v.1.2.0](https://github.com/unovue/radix-vue/releases/tag/v1.2.0).
-
 ## How to use?
 
 First, you need to import the namespaced components via `reka-ui/namespaced` in your Vue component.

docs/content/docs/utilities/use-date-formatter.md

@@ -27,9 +27,7 @@ const formatter = useDateFormatter('en')
 <template>
   <span>
     <!-- output the month in short format. e.g.: Jan, Feb, etc. -->
-    {{ formatter.custom(value.toDate(getLocalTimeZone()), {
-      month: 'short',
-    }) }}
+    {{ formatter.custom(value.toDate(getLocalTimeZone()), { month: 'short' }) }}
   </span>
 </template>
 ```

docs/content/docs/utilities/use-id.md

@@ -5,9 +5,11 @@ description: Generate random id
 
 # useId
 
-::: warning Deprecated
+<Callout type="warning" title="Deprecated">
+
 [Vue 3.5](https://blog.vuejs.org/posts/vue-3-5#useid) released an official client-server stable solution for `useId`.
-:::
+
+</Callout>
 
 <Description>
 Generate random id
@@ -18,7 +20,7 @@ Generate random id
 ```ts
 import { useId } from 'reka-ui'
 
-const buttonId = useId() // radix-1
+const buttonId = useId() // reka-1
 ```
 
 ```ts