fix: upgrade radix-vue -> reka-ui

package.json

@@ -25,16 +25,16 @@
     "dependencies": {
         "@inertiajs/vue3": "^2.0.0-beta.3",
         "@vitejs/plugin-vue": "^5.2.1",
-        "@vueuse/core": "^12.0.0",
+        "@vueuse/core": "^12.8.2",
         "autoprefixer": "^10.4.20",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^1.0",
         "lucide": "^0.468.0",
         "lucide-vue-next": "^0.468.0",
-        "radix-vue": "^1.9.11",
-        "tailwind-merge": "^2.5.5",
+        "reka-ui": "^2.1.1",
+        "tailwind-merge": "^2.6.0",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.2.2",

resources/js/components/ui/avatar/Avatar.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { AvatarRoot } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-import { avatarVariant, type AvatarVariants } from '.';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'reka-ui'
+import { avatarVariant, type AvatarVariants } from '.'
 
-const props = withDefaults(
-    defineProps<{
-        class?: HTMLAttributes['class'];
-        size?: AvatarVariants['size'];
-        shape?: AvatarVariants['shape'];
-    }>(),
-    {
-        size: 'sm',
-        shape: 'circle',
-    },
-);
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
 </script>
 
 <template>
-    <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
-        <slot />
-    </AvatarRoot>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
 </template>

resources/js/components/ui/avatar/AvatarFallback.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
 
-const props = defineProps<AvatarFallbackProps>();
+const props = defineProps<AvatarFallbackProps>()
 </script>
 
 <template>
-    <AvatarFallback v-bind="props">
-        <slot />
-    </AvatarFallback>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
 </template>

resources/js/components/ui/avatar/AvatarImage.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
-const props = defineProps<AvatarImageProps>();
+const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-    <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
 </template>

resources/js/components/ui/avatar/index.ts

@@ -1,24 +1,24 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority'
 
-export { default as Avatar } from './Avatar.vue';
-export { default as AvatarFallback } from './AvatarFallback.vue';
-export { default as AvatarImage } from './AvatarImage.vue';
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
 
 export const avatarVariant = cva(
-    'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-    {
-        variants: {
-            size: {
-                sm: 'h-10 w-10 text-xs',
-                base: 'h-16 w-16 text-2xl',
-                lg: 'h-32 w-32 text-5xl',
-            },
-            shape: {
-                circle: 'rounded-full',
-                square: 'rounded-md',
-            },
-        },
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
     },
-);
+  },
+)
 
-export type AvatarVariants = VariantProps<typeof avatarVariant>;
+export type AvatarVariants = VariantProps<typeof avatarVariant>

resources/js/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <nav aria-label="breadcrumb" :class="props.class">
-        <slot />
-    </nav>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
 </template>

resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,18 +1,22 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { MoreHorizontal } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
-        <slot>
-            <MoreHorizontal class="h-4 w-4" />
-        </slot>
-        <span class="sr-only">More</span>
-    </span>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
 </template>

resources/js/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <li :class="cn('inline-flex items-center gap-1.5', props.class)">
-        <slot />
-    </li>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
 </template>

resources/js/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
-    as: 'a',
-});
+  as: 'a',
+})
 </script>
 
 <template>
-    <Primitive :as="as" :as-child="asChild" :class="cn('transition-colors hover:text-foreground', props.class)">
-        <slot />
-    </Primitive>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>

resources/js/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <ol :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)">
-        <slot />
-    </ol>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
 </template>

resources/js/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-normal text-foreground', props.class)">
-        <slot />
-    </span>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
 </template>

resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,17 +1,21 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { ChevronRight } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
+  class?: HTMLAttributes['class']
+}>()
 </script>
 
 <template>
-    <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:h-3.5 [&>svg]:w-3.5', props.class)">
-        <slot>
-            <ChevronRight />
-        </slot>
-    </li>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
 </template>

resources/js/components/ui/breadcrumb/index.ts

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from './Breadcrumb.vue';
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
-export { default as BreadcrumbList } from './BreadcrumbList.vue';
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

resources/js/components/ui/button/Button.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-import { buttonVariants, type ButtonVariants } from '.';
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
-    variant?: ButtonVariants['variant'];
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    as: 'button',
-});
+  as: 'button',
+})
 </script>
 
 <template>
-    <Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
-        <slot />
-    </Primitive>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>