chore: ⬆️ Upgrade to Nuxt 4

app/components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {
+    HoverCardRoot,
+    type HoverCardRootEmits,
+    type HoverCardRootProps,
+    useForwardPropsEmits,
+} from "reka-ui";
+
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <HoverCardRoot
+    data-slot="hover-card"
+    v-bind="forwarded"
+  >
+    <slot />
+  </HoverCardRoot>
+</template>

app/components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+    HoverCardContent,
+    type HoverCardContentProps,
+    HoverCardPortal,
+    useForwardProps,
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+    defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        sideOffset: 4,
+    },
+);
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      data-slot="hover-card-content"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground 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 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

app/components/ui/hover-card/HoverCardTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from "reka-ui";
+
+const props = defineProps<HoverCardTriggerProps>();
+</script>
+
+<template>
+  <HoverCardTrigger
+    data-slot="hover-card-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </HoverCardTrigger>
+</template>

app/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.vue";
+export { default as HoverCardContent } from "./HoverCardContent.vue";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue";