chore: ⬆️ Upgrade to Nuxt 4

app/components/ui/badge/Badge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { type BadgeVariants, badgeVariants } from ".";
+
+const props = defineProps<
+    PrimitiveProps & {
+        variant?: BadgeVariants["variant"];
+        class?: HTMLAttributes["class"];
+    }
+>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/badge/index.ts

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export { default as Badge } from "./Badge.vue";
+
+export const badgeVariants = cva(
+    "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+                destructive:
+                    "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                outline:
+                    "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;