Migrate to reka-ui (#55)

Co-authored-by: Tony Lea <[email protected]>

Author: laserhybiz

components.json

@@ -1,20 +1,20 @@
 {
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
-  "typescript": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "resources/css/app.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "composables": "@/composables",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib"
-  },
-  "iconLibrary": "lucide"
+    "$schema": "https://shadcn-vue.com/schema.json",
+    "style": "default",
+    "typescript": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "resources/css/app.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "composables": "@/composables",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib"
+    },
+    "iconLibrary": "lucide"
 }

package-lock.json

@@ -33,7 +33,7 @@
         "laravel-vite-plugin": "^1.0",
         "lucide": "^0.468.0",
         "lucide-vue-next": "^0.468.0",
-        "radix-vue": "^1.9.11",
+        "reka-ui": "^2.0.0",
         "tailwind-merge": "^2.5.5",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",

package.json

@@ -23,7 +23,7 @@ const { isMobile, state } = useSidebar();
                     </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"
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
                     align="end" 
                     :side-offset="4"

resources/js/components/NavUser.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
-import { AvatarRoot } from 'radix-vue';
+import { AvatarRoot } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { avatarVariant, type AvatarVariants } from '.';
 

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

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

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+import { AvatarImage, type AvatarImageProps } from 'reka-ui';
 
 const props = defineProps<AvatarImageProps>();
 </script>

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive, type PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive, type PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { buttonVariants, type ButtonVariants } from '.';
 

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

@@ -7,18 +7,18 @@ export const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-                destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-                outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-                secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+                default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+                destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+                outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+                secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
                 ghost: 'hover:bg-accent hover:text-accent-foreground',
                 link: 'text-primary underline-offset-4 hover:underline',
             },
             size: {
-                default: 'h-9 px-4 py-2',
-                sm: 'h-8 rounded-md px-3 text-xs',
-                lg: 'h-10 rounded-md px-8',
-                icon: 'h-9 w-9',
+                default: 'h-10 px-4 py-2',
+                sm: 'h-9 rounded-md px-3',
+                lg: 'h-11 rounded-md px-8',
+                icon: 'h-10 w-10',
             },
         },
         defaultVariants: {

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()

resources/js/components/ui/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<CollapsibleRootProps>();
 const emits = defineEmits<CollapsibleRootEmits>();

resources/js/components/ui/collapsible/Collapsible.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue';
+import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui';
 
 const props = defineProps<CollapsibleContentProps>();
 </script>

resources/js/components/ui/collapsible/CollapsibleContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue';
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui';
 
 const props = defineProps<CollapsibleTriggerProps>();
 </script>

resources/js/components/ui/collapsible/CollapsibleTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
+import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();

resources/js/components/ui/dialog/Dialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
+import { DialogClose, type DialogCloseProps } from 'reka-ui';
 
 const props = defineProps<DialogCloseProps>();
 </script>

resources/js/components/ui/dialog/DialogClose.vue

@@ -9,7 +9,7 @@ import {
     useForwardPropsEmits,
     type DialogContentEmits,
     type DialogContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();

resources/js/components/ui/dialog/DialogContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
-import { DialogDescription, useForwardProps, type DialogDescriptionProps } from 'radix-vue';
+import { DialogDescription, useForwardProps, type DialogDescriptionProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();

resources/js/components/ui/dialog/DialogDescription.vue

@@ -9,7 +9,7 @@ import {
     useForwardPropsEmits,
     type DialogContentEmits,
     type DialogContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();

resources/js/components/ui/dialog/DialogScrollContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
-import { DialogTitle, useForwardProps, type DialogTitleProps } from 'radix-vue';
+import { DialogTitle, useForwardProps, type DialogTitleProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();