From f079f0161b9b2e7b16fa0bad5091b3c1c8ef25a1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Nov 2024 07:12:04 +0800
Subject: [PATCH] refactor: perform migration

---
 .../src/content/docs/components/accordion.md  |  4 ++--
 .../content/docs/components/collapsible.md    |  4 ++--
 .../src/content/docs/components/data-table.md | 16 +++++++--------
 .../src/content/docs/components/pagination.md |  2 +-
 .../www/src/content/docs/components/switch.md |  2 +-
 .../src/content/docs/installation/laravel.md  |  4 ++--
 .../examples/forms/components/DisplayForm.vue |  4 ++--
 .../forms/components/NotificationsForm.vue    | 20 +++++++++----------
 .../tasks/components/DataTableViewOptions.vue |  4 ++--
 .../src/examples/tasks/components/columns.ts  |  6 +++---
 .../registry/default/block/Dashboard05.vue    |  2 +-
 .../lib/registry/default/block/Sidebar01.vue  |  2 +-
 .../lib/registry/default/block/Sidebar07.vue  |  4 ++--
 .../default/example/Cards/DataTable.vue       | 12 +++++------
 .../default/example/CheckboxFormMultiple.vue  |  4 ++--
 .../default/example/CheckboxFormSingle.vue    |  2 +-
 .../example/DataTableColumnPinningDemo.vue    | 12 +++++------
 .../default/example/DataTableDemo.vue         | 12 +++++------
 .../default/example/DataTableReactiveDemo.vue | 12 +++++------
 .../example/DropdownMenuCheckboxes.vue        |  8 ++++----
 .../default/example/PaginationDemo.vue        |  2 +-
 .../registry/default/example/SwitchForm.vue   |  8 ++++----
 .../default/example/TagsInputComboboxDemo.vue |  2 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |  4 ++--
 .../NavigationMenuViewport.vue                |  2 +-
 .../default/ui/select/SelectContent.vue       |  2 +-
 .../lib/registry/default/ui/toast/index.ts    |  2 +-
 .../registry/new-york/block/Dashboard05.vue   |  2 +-
 .../lib/registry/new-york/block/Sidebar01.vue |  2 +-
 .../lib/registry/new-york/block/Sidebar07.vue |  4 ++--
 .../new-york/example/Cards/DataTable.vue      | 12 +++++------
 .../new-york/example/CheckboxFormMultiple.vue |  4 ++--
 .../new-york/example/CheckboxFormSingle.vue   |  2 +-
 .../example/DataTableColumnPinningDemo.vue    | 12 +++++------
 .../new-york/example/DataTableDemo.vue        | 12 +++++------
 .../example/DataTableReactiveDemo.vue         | 12 +++++------
 .../example/DropdownMenuCheckboxes.vue        |  8 ++++----
 .../new-york/example/PaginationDemo.vue       |  2 +-
 .../registry/new-york/example/SwitchForm.vue  |  8 ++++----
 .../example/TagsInputComboboxDemo.vue         |  2 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |  4 ++--
 .../NavigationMenuViewport.vue                |  2 +-
 .../new-york/ui/select/SelectContent.vue      |  2 +-
 .../lib/registry/new-york/ui/toast/index.ts   |  2 +-
 .../registry/styles/default/auto-form.json    |  2 +-
 .../registry/styles/default/data-table.json   |  2 +-
 .../styles/default/navigation-menu.json       |  2 +-
 .../registry/styles/default/select.json       |  2 +-
 .../public/registry/styles/default/toast.json |  2 +-
 .../registry/styles/new-york/auto-form.json   |  2 +-
 .../styles/new-york/navigation-menu.json      |  2 +-
 .../registry/styles/new-york/select.json      |  2 +-
 .../registry/styles/new-york/toast.json       |  2 +-
 apps/www/tailwind.config.js                   |  8 ++++----
 packages/cli/src/utils/templates.ts           | 12 +++++------
 .../cli/test/fixtures/nuxt/tailwind.config.js |  4 ++--
 .../transform-cjs-to-esm.test.ts.snap         | 12 +++++------
 packages/module/playground/tailwind.config.js |  8 ++++----
 58 files changed, 156 insertions(+), 156 deletions(-)

diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index f3523c06..da3888f6 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -29,10 +29,10 @@ module.exports = {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index e85e8bf2..12308bfe 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -29,10 +29,10 @@ module.exports = {
       keyframes: {
         'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index 777f1396..6d050f35 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -751,7 +751,7 @@ const table = useVueTable({
                 <DropdownMenuContent align="end">
                     <DropdownMenuCheckboxItem
                         v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
-                        class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => {
+                        class="capitalize" :modelValue="column.getIsVisible()" @update:modelValue="(value) => {
                             column.toggleVisibility(!!value)
                         }">
                         {{ column.id }}
@@ -814,13 +814,13 @@ export const columns: ColumnDef<Payment>[] = [
     {
         id: 'select',
         header: ({ table }) => h(Checkbox, {
-            'checked': table.getIsAllPageRowsSelected(),
-            'onUpdate:checked': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+            'modelValue': table.getIsAllPageRowsSelected(),
+            'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
             'ariaLabel': 'Select all',
         }),
         cell: ({ row }) => h(Checkbox, {
-            'checked': row.getIsSelected(),
-            'onUpdate:checked': (value: boolean) => row.toggleSelected(!!value),
+            'modelValue': row.getIsSelected(),
+            'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
             'ariaLabel': 'Select row',
         }),
         enableSorting: false,
@@ -995,7 +995,7 @@ const table = useVueTable({
                 <DropdownMenuContent align="end">
                     <DropdownMenuCheckboxItem
                         v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
-                        class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => {
+                        class="capitalize" :modelValue="column.getIsVisible()" @update:modelValue="(value) => {
                             column.toggleVisibility(!!value)
                         }">
                         {{ column.id }}
@@ -1369,8 +1369,8 @@ const columns = computed(() => props.table.getAllColumns()
         v-for="column in columns"
         :key="column.id"
         class="capitalize"
-        :checked="column.getIsVisible()"
-        @update:checked="(value) => column.toggleVisibility(!!value)"
+        :modelValue="column.getIsVisible()"
+        @update:modelValue="(value) => column.toggleVisibility(!!value)"
       >
         {{ column.id }}
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
index 02848c51..888b0ae3 100644
--- a/apps/www/src/content/docs/components/pagination.md
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -34,7 +34,7 @@ import {
 </script>
 
 <template>
-  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
     <PaginationList v-slot="{ items }" class="flex items-center gap-1">
       <PaginationFirst />
       <PaginationPrev />
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index 0a03b394..5fa4a7e2 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -52,7 +52,7 @@ import { Switch } from '@/components/ui/switch'
 
 ```vue
 <template>
-  <Switch :checked="isDark" @update:checked="toggleTheme">
+  <Switch :model-value="isDark" @update:model-value="toggleTheme">
     <template #thumb>
       <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
       <Icon v-else icon="lucide:sun" class="size-3" />
diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md
index 4f2aa947..7c0971db 100644
--- a/apps/www/src/content/docs/installation/laravel.md
+++ b/apps/www/src/content/docs/installation/laravel.md
@@ -112,10 +112,10 @@ export default {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/apps/www/src/examples/forms/components/DisplayForm.vue b/apps/www/src/examples/forms/components/DisplayForm.vue
index e7185561..779d1b9b 100644
--- a/apps/www/src/examples/forms/components/DisplayForm.vue
+++ b/apps/www/src/examples/forms/components/DisplayForm.vue
@@ -88,8 +88,8 @@ const onSubmit = handleSubmit((values) => {
           <FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
-                :checked="value.includes(item.id)"
-                @update:checked="(checked) => {
+                :model-value="value.includes(item.id)"
+                @update:model-value="(checked) => {
                   if (Array.isArray(value)) {
                     handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
                   }
diff --git a/apps/www/src/examples/forms/components/NotificationsForm.vue b/apps/www/src/examples/forms/components/NotificationsForm.vue
index 8c9f09a1..1a6e43fb 100644
--- a/apps/www/src/examples/forms/components/NotificationsForm.vue
+++ b/apps/www/src/examples/forms/components/NotificationsForm.vue
@@ -107,8 +107,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -126,8 +126,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -145,8 +145,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -164,8 +164,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -177,8 +177,8 @@ const onSubmit = handleSubmit((values) => {
       <FormItem class="flex flex-row items-start space-x-3 space-y-0">
         <FormControl>
           <Checkbox
-            :checked="value"
-            @update:checked="handleChange"
+            :model-value="value"
+            @update:model-value="handleChange"
           />
         </FormControl>
         <div class="space-y-1 leading-none">
diff --git a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
index 7bba52ef..746cdd7c 100644
--- a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
@@ -47,8 +47,8 @@ const columns = computed(() => props.table.getAllColumns()
         v-for="column in columns"
         :key="column.id"
         class="capitalize"
-        :checked="column.getIsVisible()"
-        @update:checked="(value) => column.toggleVisibility(!!value)"
+        :model-value="column.getIsVisible()"
+        @update:model-value="(value) => column.toggleVisibility(!!value)"
       >
         {{ column.id }}
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index c07e42cc..38514f20 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -12,12 +12,12 @@ export const columns: ColumnDef<Task>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
       'class': 'translate-y-0.5',
     }),
-    cell: ({ row }) => h(Checkbox, { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
+    cell: ({ row }) => h(Checkbox, { 'modelValue': row.getIsSelected(), 'onUpdate:modelValue': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
     enableSorting: false,
     enableHiding: false,
   },
diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/src/lib/registry/default/block/Dashboard05.vue
index a46390c2..12a793e8 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard05.vue
@@ -773,7 +773,7 @@ import {
               <div class="text-xs text-muted-foreground">
                 Updated <time dateTime="2023-11-23">November 23, 2023</time>
               </div>
-              <Pagination class="ml-auto mr-0 w-auto">
+              <Pagination class="ml-auto mr-0 w-auto" :items-per-page="10">
                 <PaginationList class="gap-1">
                   <PaginationPrev variant="outline" class="h-6 w-6" />
                   <PaginationNext variant="outline" class="h-6 w-6" />
diff --git a/apps/www/src/lib/registry/default/block/Sidebar01.vue b/apps/www/src/lib/registry/default/block/Sidebar01.vue
index 10affaf2..91aa04f4 100644
--- a/apps/www/src/lib/registry/default/block/Sidebar01.vue
+++ b/apps/www/src/lib/registry/default/block/Sidebar01.vue
@@ -135,7 +135,7 @@ function setSelectedVersion(version: string) {
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 v-if="dropdownOpen"
-                class="w-[--radix-dropdown-menu-trigger-width]"
+                class="w-[--reka-dropdown-menu-trigger-width]"
                 align="start"
               >
                 <DropdownMenuItem
diff --git a/apps/www/src/lib/registry/default/block/Sidebar07.vue b/apps/www/src/lib/registry/default/block/Sidebar07.vue
index 82e5d1da..78bcd1b1 100644
--- a/apps/www/src/lib/registry/default/block/Sidebar07.vue
+++ b/apps/www/src/lib/registry/default/block/Sidebar07.vue
@@ -242,7 +242,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                 align="start"
                 side="bottom"
                 :side-offset="4"
@@ -381,7 +381,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                   <ChevronsUpDown class="ml-auto size-4" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
+              <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
                 <DropdownMenuLabel class="p-0 font-normal">
                   <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                     <Avatar class="h-8 w-8 rounded-lg">
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
index f2e1608b..31b0ca07 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -81,13 +81,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
                 v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
                 :key="column.id"
                 class="capitalize"
-                :checked="column.getIsVisible()"
-                @update:checked="(value) => {
+                :model-value="column.getIsVisible()"
+                @update:model-value="(value) => {
                   column.toggleVisibility(!!value)
                 }"
               >
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
index 3b7788fe..e0e2b07c 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
@@ -81,8 +81,8 @@ const onSubmit = handleSubmit((values) => {
           <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
-                :checked="value.includes(item.id)"
-                @update:checked="handleChange"
+                :model-value="value.includes(item.id)"
+                @update:model-value="handleChange"
               />
             </FormControl>
             <FormLabel class="font-normal">
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
index 9e2988ce..1a215f29 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
@@ -40,7 +40,7 @@ const onSubmit = handleSubmit((values) => {
     <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
       <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4">
         <FormControl>
-          <Checkbox :checked="value" @update:checked="handleChange" />
+          <Checkbox :model-value="value" @update:model-value="handleChange" />
         </FormControl>
         <div class="space-y-1 leading-none">
           <FormLabel>Use different settings for my mobile devices</FormLabel>
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
index 571627d8..5a37788e 100644
--- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
@@ -84,14 +84,14 @@ const columns = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => {
       return h(Checkbox, {
-        'checked': row.getIsSelected(),
-        'onUpdate:checked': value => row.toggleSelected(!!value),
+        'modelValue': row.getIsSelected(),
+        'onUpdate:modelValue': value => row.toggleSelected(!!value),
         'ariaLabel': 'Select row',
       })
     },
@@ -192,8 +192,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
index a10887c7..7cbd7a20 100644
--- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue b/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
index 0016045b..b4b2ebc9 100644
--- a/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableReactiveDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -198,8 +198,8 @@ function randomize() {
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
index 34ce78f2..cb3434f3 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
@@ -11,7 +11,7 @@ import {
 } from '@/lib/registry/default/ui/dropdown-menu'
 import { ref } from 'vue'
 
-type Checked = DropdownMenuCheckboxItemProps['checked']
+type Checked = DropdownMenuCheckboxItemProps['modelValue']
 
 const showStatusBar = ref<Checked>(true)
 const showActivityBar = ref<Checked>(false)
@@ -29,18 +29,18 @@ const showPanel = ref<Checked>(false)
       <DropdownMenuLabel>Appearance</DropdownMenuLabel>
       <DropdownMenuSeparator />
       <DropdownMenuCheckboxItem
-        v-model:checked="showStatusBar"
+        v-model:model-value="showStatusBar"
       >
         Status Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showActivityBar"
+        v-model:model-value="showActivityBar"
         disabled
       >
         Activity Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showPanel"
+        v-model:model-value="showPanel"
       >
         Panel
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/lib/registry/default/example/PaginationDemo.vue b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
index 145af875..327a1280 100644
--- a/apps/www/src/lib/registry/default/example/PaginationDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
@@ -16,7 +16,7 @@ import {
 </script>
 
 <template>
-  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
     <PaginationList v-slot="{ items }" class="flex items-center gap-1">
       <PaginationFirst />
       <PaginationPrev />
diff --git a/apps/www/src/lib/registry/default/example/SwitchForm.vue b/apps/www/src/lib/registry/default/example/SwitchForm.vue
index 35e9f39f..6ab9a140 100644
--- a/apps/www/src/lib/registry/default/example/SwitchForm.vue
+++ b/apps/www/src/lib/registry/default/example/SwitchForm.vue
@@ -55,8 +55,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -73,10 +73,10 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
+                :model-value="value"
                 disabled
                 aria-readonly
-                @update:checked="handleChange"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
index 8a6cfdcf..ee1ccb9e 100644
--- a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
@@ -39,7 +39,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
         <ComboboxContent>
           <CommandList
             position="popper"
-            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            class="w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
           >
             <CommandEmpty />
             <CommandGroup>
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
index e6bb6a25..8aeae7b4 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
@@ -22,8 +22,8 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
               :is="booleanComponent"
               v-bind="{ ...slotProps.componentField }"
               :disabled="disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
+              :model-value="slotProps.componentField.modelValue"
+              @update:model-value="slotProps.componentField['onUpdate:modelValue']"
             />
           </slot>
         </FormControl>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index e6efe0a0..ef1bae23 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
index d6397118..7e80b794 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index f39704d7..8953f1ee 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
index 8dc46f45..6cf8a6a7 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
@@ -757,7 +757,7 @@ import {
               <div class="text-xs text-muted-foreground">
                 Updated <time dateTime="2023-11-23">November 23, 2023</time>
               </div>
-              <Pagination class="ml-auto mr-0 w-auto">
+              <Pagination class="ml-auto mr-0 w-auto" :items-per-page="10">
                 <PaginationList class="gap-1">
                   <PaginationPrev variant="outline" class="h-6 w-6" />
                   <PaginationNext variant="outline" class="h-6 w-6" />
diff --git a/apps/www/src/lib/registry/new-york/block/Sidebar01.vue b/apps/www/src/lib/registry/new-york/block/Sidebar01.vue
index 921a06ec..26297e98 100644
--- a/apps/www/src/lib/registry/new-york/block/Sidebar01.vue
+++ b/apps/www/src/lib/registry/new-york/block/Sidebar01.vue
@@ -135,7 +135,7 @@ function setSelectedVersion(version: string) {
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 v-if="dropdownOpen"
-                class="w-[--radix-dropdown-menu-trigger-width]"
+                class="w-[--reka-dropdown-menu-trigger-width]"
                 align="start"
               >
                 <DropdownMenuItem
diff --git a/apps/www/src/lib/registry/new-york/block/Sidebar07.vue b/apps/www/src/lib/registry/new-york/block/Sidebar07.vue
index 70bb7fc7..1857e41e 100644
--- a/apps/www/src/lib/registry/new-york/block/Sidebar07.vue
+++ b/apps/www/src/lib/registry/new-york/block/Sidebar07.vue
@@ -242,7 +242,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                 align="start"
                 side="bottom"
                 :side-offset="4"
@@ -381,7 +381,7 @@ function setActiveTeam(team: typeof data.teams[number]) {
                   <ChevronsUpDown class="ml-auto size-4" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
+              <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
                 <DropdownMenuLabel class="p-0 font-normal">
                   <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                     <Avatar class="h-8 w-8 rounded-lg">
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
index 8da408f5..395ac72b 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
@@ -81,13 +81,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
                 v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
                 :key="column.id"
                 class="capitalize"
-                :checked="column.getIsVisible()"
-                @update:checked="(value) => {
+                :model-value="column.getIsVisible()"
+                @update:model-value="(value) => {
                   column.toggleVisibility(!!value)
                 }"
               >
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
index 1f42dafe..c3c37266 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
@@ -81,8 +81,8 @@ const onSubmit = handleSubmit((values) => {
           <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
-                :checked="value.includes(item.id)"
-                @update:checked="handleChange"
+                :model-value="value.includes(item.id)"
+                @update:model-value="handleChange"
               />
             </FormControl>
             <FormLabel class="font-normal">
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
index f887913b..7f3497b2 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
@@ -40,7 +40,7 @@ const onSubmit = handleSubmit((values) => {
     <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
       <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow">
         <FormControl>
-          <Checkbox :checked="value" @update:checked="handleChange" />
+          <Checkbox :model-value="value" @update:model-value="handleChange" />
         </FormControl>
         <div class="space-y-1 leading-none">
           <FormLabel>Use different settings for my mobile devices</FormLabel>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
index 5f961e2e..a5af1d85 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -84,14 +84,14 @@ const columns = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => {
       return h(Checkbox, {
-        'checked': row.getIsSelected(),
-        'onUpdate:checked': value => row.toggleSelected(!!value),
+        'modelValue': row.getIsSelected(),
+        'onUpdate:modelValue': value => row.toggleSelected(!!value),
         'ariaLabel': 'Select row',
       })
     },
@@ -192,8 +192,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
index 20f5ed24..7b086ce6 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -187,8 +187,8 @@ const table = useVueTable({
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
index e4b77817..d72b80b4 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableReactiveDemo.vue
@@ -82,13 +82,13 @@ const columns: ColumnDef<Payment>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox, {
-      'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
-      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
     cell: ({ row }) => h(Checkbox, {
-      'checked': row.getIsSelected(),
-      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'modelValue': row.getIsSelected(),
+      'onUpdate:modelValue': value => row.toggleSelected(!!value),
       'ariaLabel': 'Select row',
     }),
     enableSorting: false,
@@ -198,8 +198,8 @@ function randomize() {
             v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
             :key="column.id"
             class="capitalize"
-            :checked="column.getIsVisible()"
-            @update:checked="(value) => {
+            :model-value="column.getIsVisible()"
+            @update:model-value="(value) => {
               column.toggleVisibility(!!value)
             }"
           >
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
index cd4456e5..4c6ef62a 100644
--- a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
@@ -11,7 +11,7 @@ import {
 } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { ref } from 'vue'
 
-type Checked = DropdownMenuCheckboxItemProps['checked']
+type Checked = DropdownMenuCheckboxItemProps['modelValue']
 
 const showStatusBar = ref<Checked>(true)
 const showActivityBar = ref<Checked>(false)
@@ -29,18 +29,18 @@ const showPanel = ref<Checked>(false)
       <DropdownMenuLabel>Appearance</DropdownMenuLabel>
       <DropdownMenuSeparator />
       <DropdownMenuCheckboxItem
-        v-model:checked="showStatusBar"
+        v-model:model-value="showStatusBar"
       >
         Status Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showActivityBar"
+        v-model:model-value="showActivityBar"
         disabled
       >
         Activity Bar
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem
-        v-model:checked="showPanel"
+        v-model:model-value="showPanel"
       >
         Panel
       </DropdownMenuCheckboxItem>
diff --git a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
index 6949ecea..fa6a0d7c 100644
--- a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
@@ -16,7 +16,7 @@ import {
 </script>
 
 <template>
-  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="2">
     <PaginationList v-slot="{ items }" class="flex items-center gap-1">
       <PaginationFirst />
       <PaginationPrev />
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
index b854bc20..91ea847d 100644
--- a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
@@ -55,8 +55,8 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
-                @update:checked="handleChange"
+                :model-value="value"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
@@ -73,10 +73,10 @@ const onSubmit = handleSubmit((values) => {
             </div>
             <FormControl>
               <Switch
-                :checked="value"
+                :model-value="value"
                 disabled
                 aria-readonly
-                @update:checked="handleChange"
+                @update:model-value="handleChange"
               />
             </FormControl>
           </FormItem>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
index f4c01cea..241ffcad 100644
--- a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -39,7 +39,7 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
         <ComboboxContent>
           <CommandList
             position="popper"
-            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+            class="w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
           >
             <CommandEmpty />
             <CommandGroup>
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
index 40fee8cc..a9f15d41 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
@@ -22,8 +22,8 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
               :is="booleanComponent"
               v-bind="{ ...slotProps.componentField }"
               :disabled="disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
+              :model-value="slotProps.componentField.modelValue"
+              @update:model-value="slotProps.componentField['onUpdate:modelValue']"
             />
           </slot>
         </FormControl>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 40463080..181bd123 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index d6397118..7e80b794 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
index 4f35f572..121f09c9 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/public/registry/styles/default/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index 19e556b1..fca1f24d 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :checked=\"slotProps.componentField.modelValue\"\n              @update:checked=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
diff --git a/apps/www/src/public/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
index 0ca7c3f3..17c01863 100644
--- a/apps/www/src/public/registry/styles/default/data-table.json
+++ b/apps/www/src/public/registry/styles/default/data-table.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "DataTable.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :checked=\"column.getIsVisible()\"\n            @update:checked=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :colspan=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :modelValue=\"column.getIsVisible()\"\n            @update:modelValue=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :colspan=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index e4dcaf19..b1cb537b 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -35,7 +35,7 @@
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index d8cd4e3d..c420f638 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 35999b94..c4344b05 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
     },
     {
       "name": "use-toast.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index e79a4df8..769d0de9 100644
--- a/apps/www/src/public/registry/styles/new-york/auto-form.json
+++ b/apps/www/src/public/registry/styles/new-york/auto-form.json
@@ -36,7 +36,7 @@
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :checked=\"slotProps.componentField.modelValue\"\n              @update:checked=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { FieldProps } from './interface'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\n\nconst props = defineProps<FieldProps>()\n\nconst booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)\n</script>\n\n<template>\n  <FormField v-slot=\"slotProps\" :name=\"fieldName\">\n    <FormItem>\n      <div class=\"space-y-0 mb-3 flex items-center gap-3\">\n        <FormControl>\n          <slot v-bind=\"slotProps\">\n            <component\n              :is=\"booleanComponent\"\n              v-bind=\"{ ...slotProps.componentField }\"\n              :disabled=\"disabled\"\n              :modelValue=\"slotProps.componentField.modelValue\"\n              @update:modelValue=\"slotProps.componentField['onUpdate:modelValue']\"\n            />\n          </slot>\n        </FormControl>\n        <AutoFormLabel v-if=\"!config?.hideLabel\" :required=\"required\">\n          {{ config?.label || beautifyObjectName(label ?? fieldName) }}\n        </AutoFormLabel>\n      </div>\n\n      <FormDescription v-if=\"config?.description\">\n        {{ config.description }}\n      </FormDescription>\n      <FormMessage />\n    </FormItem>\n  </FormField>\n</template>\n"
     },
     {
       "name": "AutoFormFieldDate.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
index 3be23019..d1eabda6 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -35,7 +35,7 @@
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',\n          props.class,\n        )\n      \"\n    />\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 2cbb1ca3..1596b0be 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui'\nimport { computed, type HTMLAttributes } from 'vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),\n  {\n    position: 'popper',\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\" :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
     },
     {
       "name": "SelectGroup.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index a625ced9..e9162897 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
+      "content": "import type { ToastRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as Toaster } from './Toaster.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',\n  {\n    variants: {\n      variant: {\n        default: 'border bg-background text-foreground',\n        destructive:\n                    'destructive group border-destructive bg-destructive text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ToastVariants = VariantProps<typeof toastVariants>\n\nexport interface ToastProps extends ToastRootProps {\n  class?: HTMLAttributes['class']\n  variant?: ToastVariants['variant']\n  onOpenChange?: ((value: boolean) => void) | undefined\n}\n"
     },
     {
       "name": "use-toast.ts",
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 85bc30fa..38f299e8 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -75,18 +75,18 @@ export default {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
         'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
index 69ea1367..df7640a3 100644
--- a/packages/cli/src/utils/templates.ts
+++ b/packages/cli/src/utils/templates.ts
@@ -30,10 +30,10 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
       },
@@ -125,18 +125,18 @@ module.exports = {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/cli/test/fixtures/nuxt/tailwind.config.js b/packages/cli/test/fixtures/nuxt/tailwind.config.js
index 62653c7b..1d96084e 100644
--- a/packages/cli/test/fixtures/nuxt/tailwind.config.js
+++ b/packages/cli/test/fixtures/nuxt/tailwind.config.js
@@ -53,10 +53,10 @@ module.exports = {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
index 93aea086..d466ef23 100644
--- a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
@@ -25,10 +25,10 @@ export default {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
       },
@@ -122,18 +122,18 @@ export default {
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--reka-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--reka-accordion-content-height)" },
           to: { height: 0 },
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },
diff --git a/packages/module/playground/tailwind.config.js b/packages/module/playground/tailwind.config.js
index 62786e95..1de76bcc 100644
--- a/packages/module/playground/tailwind.config.js
+++ b/packages/module/playground/tailwind.config.js
@@ -59,18 +59,18 @@ module.exports = {
       keyframes: {
         'accordion-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: 0 },
         },
         'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: 0 },
         },
       },