docs: update migration codemods (#1285)

* docs: update migration codemods

* adjust indent

* chore: fix error, minor update

---------

Co-authored-by: zernonia <[email protected]>

docs/components/Callout.vue

@@ -32,7 +32,7 @@ const activeType = computed(() => {
     class="text-sm rounded-xl border px-6 py-4 [&_p]:mb-0 my-4"
     :class="activeType.class"
   >
-    <div class="flex items-center gap-2 font-semibold">
+    <div class="flex items-center gap-2 font-semibold mb-4">
       <Icon
         class="text-lg"
         :icon="activeType.icon"

docs/components/examples/ComboboxTextarea/list.ts

@@ -21,7 +21,6 @@ const users = [
   { value: '@folz', listValue: 'folz' },
   { value: '@Slapbox', listValue: 'Slapbox' },
   { value: '@jyash97', listValue: 'jyash97' },
-  { value: '@k-sav', listValue: 'k-sav' },
   { value: '@AliLynne', listValue: 'AliLynne' },
   { value: '@DaniGuardiola', listValue: 'DaniGuardiola' },
   { value: '@frassinier', listValue: 'frassinier' },

docs/content/docs/guides/migration.md

@@ -19,20 +19,23 @@ Congratulation! 🎉 Now that you've installed the above package, let's perform
 
 #### Codemods
 
-To assist with the upgrade from radix-vue to Reka UI, we have added features that utilize codemods to automatically update your code to many of the new updates and patterns. Run the following command to automatically update your code for RekaUI migration:
+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:
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod reka-ui-v2/migration-recipe
-  > ```
+<Callout type="tip" title="Migration recipe">
 
+```bash
+npx codemod reka-ui/migration-recipe
+```
+
+</Callout>
 
-These will run the following codemods from the radix-vue Codemod repository:
+The [migration recipe](https://go.codemod.com/reka-recipe) will run the following codemods from the radix-vue Codemod repository:
 
-- **Remove filter-function props**
-- **Rename controlled state to v-model**
-- **Remove deprecated step prop**
+- [`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
 
@@ -45,11 +48,13 @@ import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui' // [!code +
 </script>
 ```
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/radix-vue-1-reka-ui-import-update
-  > ```
+  <Callout type="tip" title="Codemod available">
+
+  ```bash
+  npx codemod reka-ui/import-update
+  ```
+
+  </Callout>
 
 ## Naming Convention Changes
 
@@ -63,11 +68,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   [data-reka-collection-item] {}  // [!code ++]
 ```
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/radix-to-reka-css-and-data-attribute-replacement
-  > ```
+<Callout type="tip" title="Codemod available">
+
+```bash
+npx codemod reka-ui/update-css-and-data-attributes
+```
+
+</Callout>
 
 ## Component Breaking Changes
 
@@ -81,11 +88,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   </template>
   ```
 
-  > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/combobox-root-to-combobox-input
-  > ```
+  <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/radix-vue/radix-vue/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
 - [Move `displayValue` props from Root to Input](https://github.com/radix-vue/radix-vue/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
@@ -94,9 +103,8 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   <template>
     <ComboboxRoot v-model:searchTerm="search" :display-value="(v) => v.name" /> // [!code --]
     <ComboboxRoot>
-      // [!code ++]
       <ComboboxInput v-model="search" :display-value="(v) => v.name" /> // [!code ++]
-    </ComboboxRoot> // [!code ++]
+    </ComboboxRoot>
   </template>
   ```
 
@@ -115,11 +123,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   </template>
   ```
 
-    > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/searchTerm-props-of-Root-to-Input's-v-model
-  > ```
+  <Callout type="tip" title="Codemod available">
+
+  ```bash
+  npx codemod reka-ui/rename-controlled-state
+  ```
+
+  </Callout>
 
 - [Reposition `VisuallyHidden`](https://github.com/radix-vue/radix-vue/commit/107389a9c230d2c94232887b9cbe2710222564aa) - Previously `VisuallyHidden` were position at the root node, causing style scoped to not be applied.
 
@@ -155,15 +165,17 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
   </template>
   ```
 
-   > **Note**: Codemod for this Change:
-  >
-  > ```bash
-  > npx codemod rekaUI-v2/add-script-setup-and-update-calendar-components
-  > ```
+  <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/radix-vue/radix-vue/commit/6a623484d610cc3b7c1a23a77c253c8e95cef518) - Previous implmenentation of `SelectValue` will render the selected `SelectItem` via teleporting fragment. This causes SSR flickering, and it is unncessarily computation.
+- [`SelectValue` no longer render teleported element](https://github.com/radix-vue/radix-vue/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>