Migrate UI primitives from Radix to Base UI.

Co-authored-by: Cursor <[email protected]>

src/components/ui/badge.tsx

@@ -1,6 +1,7 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-import type * as React from "react";
+import { isValidElement, type ReactElement, type ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -30,19 +31,36 @@ function Badge({
 	className,
 	variant = "default",
 	asChild = false,
+	render,
+	children,
 	...props
-}: React.ComponentProps<"span"> &
-	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : "span";
+}: useRender.ComponentProps<"span"> &
+	VariantProps<typeof badgeVariants> & {
+		asChild?: boolean;
+	}) {
+	let resolvedRender = render;
+	let resolvedChildren: ReactNode = children;
 
-	return (
-		<Comp
-			data-slot="badge"
-			data-variant={variant}
-			className={cn(badgeVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+	if (!resolvedRender && asChild && isValidElement(children)) {
+		resolvedRender = children as ReactElement;
+		resolvedChildren = (children.props as { children?: ReactNode }).children;
+	}
+
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps<"span">(
+			{
+				className: cn(badgeVariants({ variant }), className),
+				children: resolvedChildren,
+			},
+			props,
+		),
+		render: resolvedRender,
+		state: {
+			slot: "badge",
+			variant,
+		},
+	});
 }
 
 export { Badge, badgeVariants };