Migrate UI primitives from Radix to Base UI.

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

src/components/ui/tooltip.tsx

@@ -1,55 +1,83 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 
+import { resolveAsChild } from "@/lib/as-child";
 import { cn } from "@/lib/utils";
 
 function TooltipProvider({
-	delayDuration = 0,
+	delay = 0,
+	delayDuration,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props & {
+	/** @deprecated Radix compat — use `delay` */
+	delayDuration?: number;
+}) {
 	return (
 		<TooltipPrimitive.Provider
 			data-slot="tooltip-provider"
-			delayDuration={delayDuration}
+			delay={delayDuration ?? delay}
 			{...props}
 		/>
 	);
 }
 
-function Tooltip({
-	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
 	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
 function TooltipTrigger({
+	asChild = false,
+	children,
+	render,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}: TooltipPrimitive.Trigger.Props & { asChild?: boolean }) {
+	const resolved = resolveAsChild(asChild, children, render);
+	return (
+		<TooltipPrimitive.Trigger
+			data-slot="tooltip-trigger"
+			render={resolved.render}
+			{...props}
+		>
+			{resolved.children}
+		</TooltipPrimitive.Trigger>
+	);
 }
 
 function TooltipContent({
 	className,
 	sideOffset = 0,
+	side = "top",
+	align = "center",
+	alignOffset = 0,
 	children,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+	Pick<
+		TooltipPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "side" | "sideOffset"
+	>) {
 	return (
 		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				data-slot="tooltip-content"
+			<TooltipPrimitive.Positioner
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-					className,
-				)}
-				{...props}
+				className="isolate z-50"
 			>
-				{children}
-				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-			</TooltipPrimitive.Content>
+				<TooltipPrimitive.Popup
+					data-slot="tooltip-content"
+					className={cn(
+						"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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-fit origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+					<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
 		</TooltipPrimitive.Portal>
 	);
 }