v5.0.12 (#2814)

* refactor to @base-ui/react

* fix all

* fixes to accordion

* more updates

* switch to chat/completions api from openai

* update version to v5.0.12

src/components/ui/accordion.tsx

@@ -1,63 +1,52 @@
-import {
-	AccordionContent as AccordionContentPrimitive,
-	type AccordionContentProps as AccordionContentPrimitiveProps,
-	AccordionHeader as AccordionHeaderPrimitive,
-	AccordionItem as AccordionItemPrimitive,
-	type AccordionItemProps as AccordionItemPrimitiveProps,
-	Accordion as AccordionPrimitive,
-	type AccordionProps as AccordionPrimitiveProps,
-	AccordionTrigger as AccordionTriggerPrimitive,
-	type AccordionTriggerProps as AccordionTriggerPrimitiveProps,
-} from "@/components/primitives/accordion";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { CaretUpIcon } from "@phosphor-icons/react";
 import { cn } from "@/utils/style";
 
-type AccordionProps = AccordionPrimitiveProps;
-
-function Accordion(props: AccordionProps) {
-	return <AccordionPrimitive {...props} />;
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+	return <AccordionPrimitive.Root data-slot="accordion" className={cn("flex w-full flex-col", className)} {...props} />;
 }
 
-type AccordionItemProps = AccordionItemPrimitiveProps;
-
-function AccordionItem({ className, ...props }: AccordionItemProps) {
-	return <AccordionItemPrimitive className={cn(className)} {...props} />;
-}
-
-type AccordionTriggerProps = AccordionTriggerPrimitiveProps;
-
-function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
 	return (
-		<AccordionHeaderPrimitive className="flex">
-			<AccordionTriggerPrimitive
+		<AccordionPrimitive.Item data-slot="accordion-item" className={cn("not-last:border-b", className)} {...props} />
+	);
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
 				className={cn(
-					"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-start font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=closed]>svg]:rotate-0 [&[data-state=open]>svg]:rotate-90 [&[data-state=open]>svg]:transition-transform",
+					"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
 					className,
 				)}
 				{...props}
 			>
 				{children}
-			</AccordionTriggerPrimitive>
-		</AccordionHeaderPrimitive>
+				<CaretUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0" />
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
 	);
 }
 
-type AccordionContentProps = AccordionContentPrimitiveProps;
-
-function AccordionContent({ className, children, ...props }: AccordionContentProps) {
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
 	return (
-		<AccordionContentPrimitive {...props}>
-			<div className={cn("pt-0 pb-4 text-sm", className)}>{children}</div>
-		</AccordionContentPrimitive>
+		<AccordionPrimitive.Panel
+			data-slot="accordion-content"
+			className="overflow-hidden text-sm data-closed:animate-accordion-up data-open:animate-accordion-down"
+			{...props}
+		>
+			<div
+				className={cn(
+					"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+					className,
+				)}
+			>
+				{children}
+			</div>
+		</AccordionPrimitive.Panel>
 	);
 }
 
-export {
-	Accordion,
-	AccordionItem,
-	AccordionTrigger,
-	AccordionContent,
-	type AccordionProps,
-	type AccordionItemProps,
-	type AccordionTriggerProps,
-	type AccordionContentProps,
-};
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

src/components/ui/alert-dialog.tsx

@@ -1,124 +1,155 @@
-import {
-	AlertDialogAction as AlertDialogActionPrimitive,
-	type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
-	AlertDialogCancel as AlertDialogCancelPrimitive,
-	type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
-	AlertDialogContent as AlertDialogContentPrimitive,
-	type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
-	AlertDialogDescription as AlertDialogDescriptionPrimitive,
-	type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
-	AlertDialogFooter as AlertDialogFooterPrimitive,
-	type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,
-	AlertDialogHeader as AlertDialogHeaderPrimitive,
-	type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,
-	AlertDialogOverlay as AlertDialogOverlayPrimitive,
-	type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-	AlertDialogPortal as AlertDialogPortalPrimitive,
-	AlertDialog as AlertDialogPrimitive,
-	type AlertDialogProps as AlertDialogPrimitiveProps,
-	AlertDialogTitle as AlertDialogTitlePrimitive,
-	type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-	AlertDialogTrigger as AlertDialogTriggerPrimitive,
-	type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-} from "@/components/primitives/alert-dialog";
-import { buttonVariants } from "@/components/ui/button";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/utils/style";
 
-type AlertDialogProps = AlertDialogPrimitiveProps;
-
-function AlertDialog(props: AlertDialogProps) {
-	return <AlertDialogPrimitive {...props} />;
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
-
-function AlertDialogTrigger(props: AlertDialogTriggerProps) {
-	return <AlertDialogTriggerPrimitive {...props} />;
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-type AlertDialogOverlayProps = AlertDialogOverlayPrimitiveProps;
-
-function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
-	return <AlertDialogOverlayPrimitive className={cn("fixed inset-0 z-50 bg-black/50", className)} {...props} />;
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
-type AlertDialogContentProps = AlertDialogContentPrimitiveProps;
-
-function AlertDialogContent({ className, ...props }: AlertDialogContentProps) {
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
 	return (
-		<AlertDialogPortalPrimitive>
-			<AlertDialogOverlay />
-			<AlertDialogContentPrimitive
-				className={cn(
-					"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
-					className,
-				)}
-				{...props}
-			/>
-		</AlertDialogPortalPrimitive>
-	);
-}
-
-type AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;
-
-function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
-	return (
-		<AlertDialogHeaderPrimitive className={cn("flex flex-col gap-2 text-center sm:text-start", className)} {...props} />
-	);
-}
-
-type AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;
-
-function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
-	return (
-		<AlertDialogFooterPrimitive
-			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+		<AlertDialogPrimitive.Backdrop
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				"data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",
+				className,
+			)}
 			{...props}
 		/>
 	);
 }
 
-type AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;
-
-function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
-	return <AlertDialogTitlePrimitive className={cn("font-semibold text-lg", className)} {...props} />;
+function AlertDialogContent({
+	className,
+	size = "default",
+	...props
+}: AlertDialogPrimitive.Popup.Props & {
+	size?: "default" | "sm";
+}) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Popup
+				data-slot="alert-dialog-content"
+				data-size={size}
+				className={cn(
+					"group/alert-dialog-content data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 outline-none ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-2xl data-[size=sm]:max-w-sm data-closed:animate-out data-open:animate-in data-[size=default]:sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
 }
 
-type AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;
-
-function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps) {
-	return <AlertDialogDescriptionPrimitive className={cn("text-muted-foreground text-sm", className)} {...props} />;
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn(
+				"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
-
-function AlertDialogAction({ className, ...props }: AlertDialogActionPrimitiveProps) {
-	return <AlertDialogActionPrimitive className={cn(buttonVariants(), className)} {...props} />;
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-media"
+			className={cn(
+				"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
 
-function AlertDialogCancel({ className, ...props }: AlertDialogCancelPrimitiveProps) {
-	return <AlertDialogCancelPrimitive className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />;
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn(
+				"font-medium text-lg sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn(
+				"text-balance text-muted-foreground text-sm md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+	return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+	className,
+	variant = "outline",
+	size = "default",
+	...props
+}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+	return (
+		<AlertDialogPrimitive.Close
+			data-slot="alert-dialog-cancel"
+			className={cn(className)}
+			render={<Button variant={variant} size={size} />}
+			{...props}
+		/>
+	);
 }
 
 export {
 	AlertDialog,
-	AlertDialogTrigger,
-	AlertDialogContent,
-	AlertDialogHeader,
-	AlertDialogFooter,
-	AlertDialogTitle,
-	AlertDialogDescription,
 	AlertDialogAction,
 	AlertDialogCancel,
-	type AlertDialogProps,
-	type AlertDialogTriggerProps,
-	type AlertDialogContentProps,
-	type AlertDialogHeaderProps,
-	type AlertDialogFooterProps,
-	type AlertDialogTitleProps,
-	type AlertDialogDescriptionProps,
-	type AlertDialogActionProps,
-	type AlertDialogCancelProps,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogMedia,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 };

src/components/ui/alert.tsx

@@ -52,4 +52,4 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
 	return <div data-slot="alert-action" className={cn("absolute inset-e-3 top-2.5", className)} {...props} />;
 }
 
-export { Alert, AlertTitle, AlertDescription, AlertAction };
+export { Alert, AlertAction, AlertDescription, AlertTitle };

src/components/ui/avatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar as AvatarPrimitive } from "radix-ui";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import type * as React from "react";
 import { cn } from "@/utils/style";
 
@@ -6,7 +6,7 @@ function Avatar({
 	className,
 	size = "default",
 	...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+}: AvatarPrimitive.Root.Props & {
 	size?: "default" | "sm" | "lg";
 }) {
 	return (
@@ -22,7 +22,7 @@ function Avatar({
 	);
 }
 
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
 	return (
 		<AvatarPrimitive.Image
 			data-slot="avatar-image"
@@ -32,7 +32,7 @@ function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar
 	);
 }
 
-function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
 	return (
 		<AvatarPrimitive.Fallback
 			data-slot="avatar-fallback"
@@ -87,4 +87,4 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
 	);
 }
 
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

src/components/ui/badge.tsx

@@ -1,6 +1,6 @@
+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";
-import type * as React from "react";
 import { cn } from "@/utils/style";
 
 const badgeVariants = cva(
@@ -26,14 +26,15 @@ const badgeVariants = cva(
 function Badge({
 	className,
 	variant = "default",
-	asChild = false,
+	render,
 	...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot.Root : "span";
-
-	return (
-		<Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
-	);
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+	return useRender({
+		render,
+		defaultTagName: "span",
+		state: { slot: "badge", variant },
+		props: mergeProps<"span">({ className: cn(badgeVariants({ variant }), className) }, props),
+	});
 }
 
-export { Badge };
+export { Badge, badgeVariants };

src/components/ui/button-group.tsx

@@ -1,5 +1,6 @@
+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";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/utils/style";
 
@@ -9,9 +10,9 @@ const buttonGroupVariants = cva(
 		variants: {
 			orientation: {
 				horizontal:
-					"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
+					"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
 				vertical:
-					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!",
+					"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
 			},
 		},
 		defaultVariants: {
@@ -36,24 +37,21 @@ function ButtonGroup({
 	);
 }
 
-function ButtonGroupText({
-	className,
-	asChild = false,
-	...props
-}: React.ComponentProps<"div"> & {
-	asChild?: boolean;
-}) {
-	const Comp = asChild ? Slot.Root : "div";
-
-	return (
-		<Comp
-			className={cn(
-				"flex items-center gap-2 rounded-md border bg-muted px-2.5 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">) {
+	return useRender({
+		render,
+		defaultTagName: "div",
+		state: { slot: "button-group-text" },
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"flex items-center gap-2 rounded-md border bg-muted px-2.5 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+					className,
+				),
+			},
+			props,
+		),
+	});
 }
 
 function ButtonGroupSeparator({
@@ -66,7 +64,7 @@ function ButtonGroupSeparator({
 			data-slot="button-group-separator"
 			orientation={orientation}
 			className={cn(
-				"relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto data-[orientation=horizontal]:w-auto",
+				"relative self-stretch bg-input data-horizontal:mx-px data-vertical:my-px data-vertical:h-auto data-horizontal:w-auto",
 				className,
 			)}
 			{...props}
@@ -74,4 +72,4 @@ function ButtonGroupSeparator({
 	);
 }
 
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

src/components/ui/button.tsx

@@ -1,28 +1,31 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Button as ButtonPrimitive, type ButtonProps as ButtonPrimitiveProps } from "@/components/primitives/button";
 import { cn } from "@/utils/style";
 
 const buttonVariants = cva(
-	"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[box-shadow,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"group/button inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-clip-padding font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
+				default: "bg-primary text-primary-foreground hover:bg-primary/80",
+				outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-muted hover:text-foreground",
 				destructive:
-					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-				outline: "border bg-background shadow-xs hover:bg-secondary/40 hover:text-secondary-foreground",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-secondary/40 hover:text-secondary-foreground",
+					"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				default:
+					"h-9 gap-1.5 in-data-[slot=button-group]:rounded-md px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 in-data-[slot=button-group]:rounded-md rounded-[min(var(--radius-md),8px)] px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-8 gap-1 in-data-[slot=button-group]:rounded-md rounded-[min(var(--radius-md),10px)] px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+				lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
 				icon: "size-9",
-				"icon-sm": "size-8 rounded-md",
-				"icon-lg": "size-10 rounded-md",
+				"icon-xs":
+					"size-6 in-data-[slot=button-group]:rounded-md rounded-[min(var(--radius-md),8px)] [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-8 in-data-[slot=button-group]:rounded-md rounded-[min(var(--radius-md),10px)]",
+				"icon-lg": "size-10",
 			},
 		},
 		defaultVariants: {
@@ -32,10 +35,10 @@ const buttonVariants = cva(
 	},
 );
 
-type ButtonProps = ButtonPrimitiveProps & VariantProps<typeof buttonVariants>;
+type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>;
 
-function Button({ className, variant, size, type = "button", ...props }: ButtonProps) {
-	return <ButtonPrimitive type={type} className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+function Button({ className, variant = "default", size = "default", ...props }: ButtonProps) {
+	return <ButtonPrimitive data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
 }
 
-export { Button, buttonVariants, type ButtonProps };
+export { Button, type ButtonProps, buttonVariants };

src/components/ui/combobox.tsx

@@ -1,12 +1,252 @@
+import { Combobox as ComboboxPrimitive, type ComboboxTriggerState, type UseRenderRenderProp } from "@base-ui/react";
 import { t } from "@lingui/core/macro";
-import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
 import * as React from "react";
 import { Button } from "@/components/ui/button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
 import { useControlledState } from "@/hooks/use-controlled-state";
 import { cn } from "@/utils/style";
 
+const ComboboxRoot = ComboboxPrimitive.Root;
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+	return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
+	return (
+		<ComboboxPrimitive.Trigger
+			data-slot="combobox-trigger"
+			className={cn("shrink-0 [&_svg:not([class*='size-'])]:size-4", className)}
+			{...props}
+		>
+			{children}
+			<CaretDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+		</ComboboxPrimitive.Trigger>
+	);
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+	return (
+		<ComboboxPrimitive.Clear
+			data-slot="combobox-clear"
+			className={cn(className)}
+			{...props}
+			render={
+				<InputGroupButton variant="ghost" size="icon-xs">
+					<XIcon className="pointer-events-none" />
+				</InputGroupButton>
+			}
+		/>
+	);
+}
+
+function ComboboxInput({
+	className,
+	children,
+	disabled = false,
+	showTrigger = true,
+	showClear = false,
+	...props
+}: ComboboxPrimitive.Input.Props & {
+	showTrigger?: boolean;
+	showClear?: boolean;
+}) {
+	return (
+		<InputGroup className={cn("w-auto", className)}>
+			<ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+			<InputGroupAddon align="inline-end">
+				{showTrigger && (
+					<InputGroupButton
+						size="icon-xs"
+						variant="ghost"
+						render={<ComboboxTrigger />}
+						data-slot="input-group-button"
+						className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+						disabled={disabled}
+					/>
+				)}
+				{showClear && <ComboboxClear disabled={disabled} />}
+			</InputGroupAddon>
+			{children}
+		</InputGroup>
+	);
+}
+
+function ComboboxContent({
+	className,
+	side = "bottom",
+	sideOffset = 6,
+	align = "start",
+	alignOffset = 0,
+	anchor,
+	...props
+}: ComboboxPrimitive.Popup.Props &
+	Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">) {
+	return (
+		<ComboboxPrimitive.Portal>
+			<ComboboxPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				className="isolate z-50"
+			>
+				<ComboboxPrimitive.Popup
+					data-slot="combobox-content"
+					data-chips={!!anchor}
+					className={cn(
+						"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) min-w-60 max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-closed:animate-out data-open:animate-in *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none",
+						className,
+					)}
+					{...props}
+				/>
+			</ComboboxPrimitive.Positioner>
+		</ComboboxPrimitive.Portal>
+	);
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+	return (
+		<ComboboxPrimitive.List
+			data-slot="combobox-list"
+			className={cn(
+				"no-scrollbar max-h-80 scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
+	return (
+		<ComboboxPrimitive.Item
+			data-slot="combobox-item"
+			className={cn(
+				"relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50 not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ComboboxPrimitive.ItemIndicator
+				render={
+					<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+						<CheckIcon className="pointer-events-none" />
+					</span>
+				}
+			/>
+		</ComboboxPrimitive.Item>
+	);
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+	return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />;
+}
+
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
+	return (
+		<ComboboxPrimitive.GroupLabel
+			data-slot="combobox-label"
+			className={cn("px-2 py-1.5 text-muted-foreground text-xs", className)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+	return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+	return (
+		<ComboboxPrimitive.Empty
+			data-slot="combobox-empty"
+			className={cn(
+				"hidden w-full justify-center py-2 text-center text-muted-foreground text-sm group-data-empty/combobox-content:flex",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
+	return (
+		<ComboboxPrimitive.Separator
+			data-slot="combobox-separator"
+			className={cn("-mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxChips({
+	className,
+	...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
+	return (
+		<ComboboxPrimitive.Chips
+			data-slot="combobox-chips"
+			className={cn(
+				"flex min-h-8 flex-wrap items-center gap-1 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:px-2 has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ComboboxChip({
+	className,
+	children,
+	showRemove = true,
+	...props
+}: ComboboxPrimitive.Chip.Props & {
+	showRemove?: boolean;
+}) {
+	return (
+		<ComboboxPrimitive.Chip
+			data-slot="combobox-chip"
+			className={cn(
+				"flex h-6 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-md bg-muted px-1.5 font-medium text-foreground text-xs has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showRemove && (
+				<ComboboxPrimitive.ChipRemove
+					className="-ml-1 opacity-50 hover:opacity-100"
+					data-slot="combobox-chip-remove"
+					render={
+						<Button variant="ghost" size="icon-xs">
+							<XIcon className="pointer-events-none" />
+						</Button>
+					}
+				/>
+			)}
+		</ComboboxPrimitive.Chip>
+	);
+}
+
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
+	return (
+		<ComboboxPrimitive.Input
+			data-slot="combobox-chip-input"
+			className={cn("min-w-16 flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function useComboboxAnchor() {
+	return React.useRef<HTMLDivElement | null>(null);
+}
+
 type ComboboxOption<TValue extends string | number = string> = {
 	value: TValue;
 	label: React.ReactNode;
@@ -14,149 +254,200 @@ type ComboboxOption<TValue extends string | number = string> = {
 	disabled?: boolean;
 };
 
-type ComboboxProps<TValue extends string | number = string> = Omit<
-	React.ComponentProps<typeof PopoverContent>,
-	"value" | "defaultValue" | "children"
-> & {
-	disabled?: boolean;
-	clearable?: boolean;
-	options: ReadonlyArray<ComboboxOption<TValue>>;
+type SingleComboboxProps<TValue extends string | number = string> = {
+	options: ComboboxOption<TValue>[];
 	value?: TValue | null;
 	defaultValue?: TValue | null;
-	placeholder?: React.ReactNode;
+	onValueChange?: (value: TValue | null) => void;
+	multiple?: false;
+	disabled?: boolean;
+	showClear?: boolean;
+	placeholder?: string;
 	searchPlaceholder?: string;
 	emptyMessage?: React.ReactNode;
-	buttonProps?: Omit<React.ComponentProps<typeof Button>, "children"> & {
-		children?: (value: TValue | null, option: ComboboxOption<TValue> | null) => React.ReactNode;
-	};
-	onValueChange?: (value: TValue | null, option: ComboboxOption<TValue> | null) => void;
+	className?: string;
+	id?: string;
+	name?: string;
+	render?: UseRenderRenderProp<ComboboxTriggerState>;
 };
 
-function Combobox<TValue extends string | number = string>({
-	disabled = false,
-	clearable = true,
-	options,
-	value,
-	defaultValue = null,
-	placeholder = t`Select...`,
-	searchPlaceholder = t`Search...`,
-	emptyMessage = t`No results found.`,
-	className,
-	buttonProps,
-	onValueChange,
-	...props
-}: ComboboxProps<TValue>) {
-	const { className: buttonClassName, children: buttonChildren, ...buttonRestProps } = buttonProps ?? {};
-	const [open, setOpen] = React.useState(false);
+type MultiComboboxProps<TValue extends string | number = string> = {
+	options: ComboboxOption<TValue>[];
+	value?: TValue[] | null;
+	defaultValue?: TValue[] | null;
+	onValueChange?: (value: TValue[] | null) => void;
+	multiple: true;
+	disabled?: boolean;
+	showClear?: boolean;
+	placeholder?: string;
+	searchPlaceholder?: string;
+	emptyMessage?: React.ReactNode;
+	className?: string;
+	id?: string;
+	name?: string;
+	render?: UseRenderRenderProp<ComboboxTriggerState>;
+};
 
-	const [selectedValue, setSelectedValue] = useControlledState<TValue | null>({
-		value,
-		defaultValue,
-		onChange: (next) => onValueChange?.(next, options.find((o) => o.value === next) ?? null),
-	});
+type ComboboxProps<TValue extends string | number = string> = SingleComboboxProps<TValue> | MultiComboboxProps<TValue>;
 
-	const selectedOption = React.useMemo(() => {
-		return options.find((option) => option.value === selectedValue) ?? null;
-	}, [options, selectedValue]);
+function Combobox<TValue extends string | number = string>(props: ComboboxProps<TValue>) {
+	const {
+		options,
+		multiple = false,
+		disabled = false,
+		showClear = false,
+		placeholder,
+		searchPlaceholder,
+		emptyMessage,
+		className,
+		id,
+		name,
+		render,
+	} = props;
 
-	const selectedLabel = selectedOption?.label;
+	const { contains } = ComboboxPrimitive.useFilter();
 
-	const onSelect = React.useCallback(
-		(current: string) => {
-			const next = (current as unknown as TValue) ?? null;
+	const optionMap = React.useMemo(() => new Map(options.map((opt) => [String(opt.value), opt])), [options]);
 
-			if (!clearable && selectedValue === next) {
-				setOpen(false);
-				return;
+	const findOption = React.useCallback(
+		(v: TValue | TValue[] | null | undefined) => {
+			if (multiple) {
+				if (!v || !Array.isArray(v)) return [];
+				return (v as TValue[])
+					.map((item) => optionMap.get(String(item)) ?? null)
+					.filter(Boolean) as ComboboxOption<TValue>[];
+			} else {
+				if (v == null) return null;
+				return optionMap.get(String(v)) ?? null;
 			}
-
-			const toggled = selectedValue === next ? null : next;
-			setSelectedValue(toggled);
-			setOpen(false);
 		},
-		[clearable, selectedValue, setSelectedValue],
+		[optionMap, multiple],
 	);
 
-	// Prevent opening popover and handling interaction if disabled
-	const handleOpenChange = React.useCallback(
-		(nextOpen: boolean) => {
-			if (disabled) return;
-			setOpen(nextOpen);
+	type OptionValue = ComboboxOption<TValue>[] | ComboboxOption<TValue> | null;
+
+	const rawValueKey = props.value !== undefined ? JSON.stringify(props.value) : undefined;
+	const resolvedValue = React.useMemo(
+		() => (props.value !== undefined ? (findOption(props.value) as OptionValue) : undefined),
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- stable key avoids new-reference loops
+		[rawValueKey, optionMap],
+	);
+
+	const rawDefaultKey = props.defaultValue !== undefined ? JSON.stringify(props.defaultValue) : undefined;
+	const resolvedDefaultValue = React.useMemo(
+		() => (props.defaultValue !== undefined ? (findOption(props.defaultValue) as OptionValue) : undefined),
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- only needed on mount / options change
+		[rawDefaultKey, optionMap],
+	);
+
+	const handleExternalChange = React.useCallback(
+		(option: ComboboxOption<TValue>[] | ComboboxOption<TValue> | null) => {
+			if (multiple) {
+				const arrOpt = Array.isArray(option) ? option : option ? [option] : [];
+				(props as MultiComboboxProps<TValue>).onValueChange?.(arrOpt.length > 0 ? arrOpt.map((opt) => opt.value) : []);
+			} else {
+				const value = option && !Array.isArray(option) ? (option as ComboboxOption<TValue>).value : null;
+				const cb = props.onValueChange as ((value: TValue | null) => void) | undefined;
+				cb?.(value ?? null);
+			}
 		},
-		[disabled],
+		[props, multiple],
+	);
+
+	const [selectedValue, setSelectedValue] = useControlledState({
+		value: resolvedValue,
+		defaultValue: resolvedDefaultValue,
+		onChange: handleExternalChange,
+	});
+
+	const itemToStringLabel = React.useCallback(
+		(item: ComboboxOption<TValue>) => (typeof item.label === "string" ? item.label : String(item.value)),
+		[],
+	);
+
+	const isItemEqualToValue = React.useCallback(
+		(a: ComboboxOption<TValue>, b: ComboboxOption<TValue>) => String(a.value) === String(b.value),
+		[],
+	);
+
+	const filter = React.useCallback(
+		(item: ComboboxOption<TValue>, query: string) => {
+			const labelStr = typeof item.label === "string" ? item.label : String(item.value);
+			if (contains(labelStr, query)) return true;
+			return item.keywords?.some((kw) => contains(kw, query)) ?? false;
+		},
+		[contains],
+	);
+
+	const listContent = (item: ComboboxOption<TValue>) => (
+		<ComboboxItem key={String(item.value)} value={item} disabled={item.disabled}>
+			{item.label}
+		</ComboboxItem>
 	);
 
 	return (
-		<Popover open={open} onOpenChange={handleOpenChange}>
-			<PopoverTrigger asChild>
-				<Button
-					role="combobox"
-					variant="outline"
-					aria-expanded={open}
-					disabled={disabled}
-					aria-disabled={disabled}
-					tapScale={1}
-					className={cn(
-						"font-normal active:scale-100",
-						typeof buttonChildren === "function" ? "" : "justify-between",
-						disabled && "pointer-events-none opacity-60",
-						buttonClassName,
-					)}
-					{...buttonRestProps}
-				>
-					{typeof buttonChildren === "function" ? (
-						buttonChildren(selectedValue, selectedOption)
-					) : (
-						<>
-							{selectedLabel ?? placeholder}
-							<CaretUpDownIcon className="ms-2 shrink-0 opacity-50" />
-						</>
-					)}
-				</Button>
-			</PopoverTrigger>
-
-			<PopoverContent
-				align="start"
-				aria-disabled={disabled}
-				tabIndex={disabled ? -1 : undefined}
-				className={cn("min-w-[200px] p-0", className, disabled && "pointer-events-none select-none opacity-60")}
-				{...props}
+		<ComboboxRoot
+			name={name}
+			items={options}
+			filter={filter}
+			disabled={disabled}
+			value={selectedValue as ComboboxOption<TValue>[] & ComboboxOption<TValue>}
+			onValueChange={setSelectedValue as (value: ComboboxOption<TValue>[] | ComboboxOption<TValue> | null) => void}
+			itemToStringLabel={itemToStringLabel}
+			isItemEqualToValue={isItemEqualToValue}
+			{...(multiple ? { multiple: true } : {})}
+		>
+			<ComboboxTrigger
+				id={id}
+				disabled={disabled}
+				render={
+					render ?? (
+						<Button
+							variant="outline"
+							className={cn("justify-start text-left font-normal hover:bg-muted/20", className)}
+						/>
+					)
+				}
 			>
-				<Command>
-					<CommandInput placeholder={searchPlaceholder} disabled={disabled} />
-					<CommandList>
-						<CommandEmpty>{emptyMessage}</CommandEmpty>
-						<CommandGroup>
-							{options.map((option) => {
-								const isSelected = selectedValue === option.value;
-								const isDisabled = option.disabled ?? disabled;
+				<span className="min-w-0 flex-1 truncate text-left">
+					<ComboboxValue placeholder={placeholder ?? t`Select...`} />
+				</span>
 
-								return (
-									<CommandItem
-										key={String(option.value)}
-										value={String(option.value)}
-										keywords={option.keywords}
-										disabled={isDisabled}
-										onSelect={isDisabled ? undefined : onSelect}
-										aria-disabled={isDisabled}
-										className={cn(isDisabled && "pointer-events-none opacity-60")}
-									>
-										<CheckIcon
-											aria-hidden
-											className={cn("size-4 shrink-0 transition-opacity", isSelected ? "opacity-100" : "opacity-0")}
-										/>
-										<span className={cn("truncate", isDisabled && "opacity-60")}>{option.label}</span>
-									</CommandItem>
-								);
-							})}
-						</CommandGroup>
-					</CommandList>
-				</Command>
-			</PopoverContent>
-		</Popover>
+				{showClear && <ComboboxClear disabled={disabled} />}
+			</ComboboxTrigger>
+
+			<ComboboxContent>
+				<ComboboxPrimitive.Input
+					placeholder={searchPlaceholder ?? placeholder ?? t`Search...`}
+					render={<Input disabled={disabled} className="rounded-b-none focus-visible:ring-0" />}
+				/>
+				<ComboboxEmpty>{emptyMessage ?? t`No results found.`}</ComboboxEmpty>
+				<ComboboxList>{listContent}</ComboboxList>
+			</ComboboxContent>
+		</ComboboxRoot>
 	);
 }
 
-export type { ComboboxOption, ComboboxProps };
-
-export { Combobox };
+export {
+	Combobox,
+	ComboboxChip,
+	ComboboxChips,
+	ComboboxChipsInput,
+	ComboboxCollection,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxGroup,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxLabel,
+	ComboboxList,
+	type ComboboxOption,
+	type ComboboxProps,
+	ComboboxRoot,
+	ComboboxSeparator,
+	ComboboxTrigger,
+	ComboboxValue,
+	type MultiComboboxProps,
+	type SingleComboboxProps,
+	useComboboxAnchor,
+};

src/components/ui/command.tsx

@@ -10,7 +10,7 @@ function Command({ className, ...props }: React.ComponentProps<typeof CommandPri
 		<CommandPrimitive
 			data-slot="command"
 			className={cn(
-				"flex size-full flex-col gap-y-1 overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+				"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
 				className,
 			)}
 			{...props}
@@ -23,11 +23,14 @@ function CommandDialog({
 	description = "Search for a command to run...",
 	children,
 	className,
+	showClose = false,
 	...props
-}: React.ComponentProps<typeof Dialog> & {
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
 	title?: string;
 	description?: string;
 	className?: string;
+	showClose?: boolean;
+	children: React.ReactNode;
 }) {
 	return (
 		<Dialog {...props}>
@@ -35,7 +38,12 @@ function CommandDialog({
 				<DialogTitle>{title}</DialogTitle>
 				<DialogDescription>{description}</DialogDescription>
 			</DialogHeader>
-			<DialogContent className={cn("overflow-hidden rounded-xl! p-0", className)}>{children}</DialogContent>
+			<DialogContent
+				className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
+				showClose={showClose}
+			>
+				{children}
+			</DialogContent>
 		</Dialog>
 	);
 }
@@ -43,7 +51,7 @@ function CommandDialog({
 function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
 	return (
 		<div data-slot="command-input-wrapper" className="p-1 pb-0">
-			<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!">
+			<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
 				<CommandPrimitive.Input
 					data-slot="command-input"
 					className={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)}
@@ -132,11 +140,11 @@ function CommandShortcut({ className, ...props }: React.ComponentProps<"span">)
 export {
 	Command,
 	CommandDialog,
-	CommandInput,
-	CommandList,
 	CommandEmpty,
 	CommandGroup,
+	CommandInput,
 	CommandItem,
-	CommandShortcut,
+	CommandList,
 	CommandSeparator,
+	CommandShortcut,
 };

src/components/ui/context-menu.tsx

@@ -1,13 +1,17 @@
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
 import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
-import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 import type * as React from "react";
 import { cn } from "@/utils/style";
 
-function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
 	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
-function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+	return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
 	return (
 		<ContextMenuPrimitive.Trigger
 			data-slot="context-menu-trigger"
@@ -17,39 +21,55 @@ function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof
 	);
 }
 
-function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+function ContextMenuContent({
+	className,
+	align = "start",
+	alignOffset = 4,
+	side = "right",
+	sideOffset = 0,
+	...props
+}: ContextMenuPrimitive.Popup.Props &
+	Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Positioner
+				className="isolate z-50 outline-none"
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+			>
+				<ContextMenuPrimitive.Popup
+					data-slot="context-menu-content"
+					className={cn(
+						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
+						className,
+					)}
+					{...props}
+				/>
+			</ContextMenuPrimitive.Positioner>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
 	return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
 }
 
-function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-	return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
-}
-
-function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-	return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
-}
-
-function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-	return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
-}
-
-function ContextMenuContent({
+function ContextMenuLabel({
 	className,
+	inset,
 	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
-	side?: "top" | "right" | "bottom" | "left";
+}: ContextMenuPrimitive.GroupLabel.Props & {
+	inset?: boolean;
 }) {
 	return (
-		<ContextMenuPrimitive.Portal>
-			<ContextMenuPrimitive.Content
-				data-slot="context-menu-content"
-				className={cn(
-					"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
-					className,
-				)}
-				{...props}
-			/>
-		</ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.GroupLabel
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:pl-8", className)}
+			{...props}
+		/>
 	);
 }
 
@@ -58,7 +78,7 @@ function ContextMenuItem({
 	inset,
 	variant = "default",
 	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+}: ContextMenuPrimitive.Item.Props & {
 	inset?: boolean;
 	variant?: "default" | "destructive";
 }) {
@@ -68,7 +88,7 @@ function ContextMenuItem({
 			data-inset={inset}
 			data-variant={variant}
 			className={cn(
-				"group/context-menu-item relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:ps-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+				"group/context-menu-item relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
 				className,
 			)}
 			{...props}
@@ -76,111 +96,101 @@ function ContextMenuItem({
 	);
 }
 
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+	return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />;
+}
+
 function ContextMenuSubTrigger({
 	className,
 	inset,
 	children,
 	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
 	inset?: boolean;
 }) {
 	return (
-		<ContextMenuPrimitive.SubTrigger
+		<ContextMenuPrimitive.SubmenuTrigger
 			data-slot="context-menu-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-inset:ps-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-inset:pl-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			{...props}
 		>
 			{children}
 			<CaretRightIcon className="ml-auto" />
-		</ContextMenuPrimitive.SubTrigger>
+		</ContextMenuPrimitive.SubmenuTrigger>
 	);
 }
 
-function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-	return (
-		<ContextMenuPrimitive.SubContent
-			data-slot="context-menu-sub-content"
-			className={cn(
-				"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-closed:animate-out data-open:animate-in",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>) {
+	return <ContextMenuContent data-slot="context-menu-sub-content" className="shadow-lg" side="right" {...props} />;
 }
 
 function ContextMenuCheckboxItem({
 	className,
 	children,
 	checked,
+	inset,
 	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+	inset?: boolean;
+}) {
 	return (
 		<ContextMenuPrimitive.CheckboxItem
 			data-slot="context-menu-checkbox-item"
+			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			checked={checked}
 			{...props}
 		>
-			<span className="pointer-events-none absolute inset-e-2">
-				<ContextMenuPrimitive.ItemIndicator>
+			<span className="pointer-events-none absolute right-2">
+				<ContextMenuPrimitive.CheckboxItemIndicator>
 					<CheckIcon />
-				</ContextMenuPrimitive.ItemIndicator>
+				</ContextMenuPrimitive.CheckboxItemIndicator>
 			</span>
 			{children}
 		</ContextMenuPrimitive.CheckboxItem>
 	);
 }
 
+function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {
+	return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
 function ContextMenuRadioItem({
 	className,
 	children,
+	inset,
 	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+}: ContextMenuPrimitive.RadioItem.Props & {
+	inset?: boolean;
+}) {
 	return (
 		<ContextMenuPrimitive.RadioItem
 			data-slot="context-menu-radio-item"
+			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute inset-e-2">
-				<ContextMenuPrimitive.ItemIndicator>
+			<span className="pointer-events-none absolute right-2">
+				<ContextMenuPrimitive.RadioItemIndicator>
 					<CheckIcon />
-				</ContextMenuPrimitive.ItemIndicator>
+				</ContextMenuPrimitive.RadioItemIndicator>
 			</span>
 			{children}
 		</ContextMenuPrimitive.RadioItem>
 	);
 }
 
-function ContextMenuLabel({
-	className,
-	inset,
-	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-	inset?: boolean;
-}) {
-	return (
-		<ContextMenuPrimitive.Label
-			data-slot="context-menu-label"
-			data-inset={inset}
-			className={cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-8", className)}
-			{...props}
-		/>
-	);
-}
-
-function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {
 	return (
 		<ContextMenuPrimitive.Separator
 			data-slot="context-menu-separator"
@@ -205,18 +215,18 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
 
 export {
 	ContextMenu,
-	ContextMenuTrigger,
-	ContextMenuContent,
-	ContextMenuItem,
 	ContextMenuCheckboxItem,
-	ContextMenuRadioItem,
+	ContextMenuContent,
+	ContextMenuGroup,
+	ContextMenuItem,
 	ContextMenuLabel,
+	ContextMenuPortal,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
 	ContextMenuSeparator,
 	ContextMenuShortcut,
-	ContextMenuGroup,
-	ContextMenuPortal,
 	ContextMenuSub,
 	ContextMenuSubContent,
 	ContextMenuSubTrigger,
-	ContextMenuRadioGroup,
+	ContextMenuTrigger,
 };

src/components/ui/dialog.tsx

@@ -1,115 +1,119 @@
-import {
-	DialogClose as DialogClosePrimitive,
-	type DialogCloseProps as DialogClosePrimitiveProps,
-	DialogContent as DialogContentPrimitive,
-	type DialogContentProps as DialogContentPrimitiveProps,
-	DialogDescription as DialogDescriptionPrimitive,
-	type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-	DialogFooter as DialogFooterPrimitive,
-	type DialogFooterProps as DialogFooterPrimitiveProps,
-	DialogHeader as DialogHeaderPrimitive,
-	type DialogHeaderProps as DialogHeaderPrimitiveProps,
-	DialogOverlay as DialogOverlayPrimitive,
-	type DialogOverlayProps as DialogOverlayPrimitiveProps,
-	DialogPortal as DialogPortalPrimitive,
-	Dialog as DialogPrimitive,
-	type DialogProps as DialogPrimitiveProps,
-	DialogTitle as DialogTitlePrimitive,
-	type DialogTitleProps as DialogTitlePrimitiveProps,
-	DialogTrigger as DialogTriggerPrimitive,
-	type DialogTriggerProps as DialogTriggerPrimitiveProps,
-} from "@/components/primitives/dialog";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { Trans } from "@lingui/react/macro";
+import { XIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/utils/style";
 
-type DialogProps = DialogPrimitiveProps;
-
-function Dialog(props: DialogProps) {
-	return <DialogPrimitive {...props} />;
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-type DialogTriggerProps = DialogTriggerPrimitiveProps;
-
-function DialogTrigger(props: DialogTriggerProps) {
-	return <DialogTriggerPrimitive {...props} />;
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-type DialogCloseProps = DialogClosePrimitiveProps;
-
-function DialogClose(props: DialogCloseProps) {
-	return <DialogClosePrimitive {...props} />;
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-type DialogOverlayProps = DialogOverlayPrimitiveProps;
-
-function DialogOverlay({ className, ...props }: DialogOverlayProps) {
-	return <DialogOverlayPrimitive className={cn("fixed inset-0 z-50 bg-black/50", className)} {...props} />;
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-type DialogContentProps = DialogContentPrimitiveProps;
-
-function DialogContent({ className, children, ...props }: DialogContentProps) {
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
 	return (
-		<DialogPortalPrimitive>
-			<DialogOverlay />
-			<DialogContentPrimitive
-				className={cn(
-					"fixed top-[50%] left-[50%] z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border bg-background p-6 shadow-lg sm:max-w-2xl 2xl:max-w-4xl",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-			</DialogContentPrimitive>
-		</DialogPortalPrimitive>
-	);
-}
-
-type DialogHeaderProps = DialogHeaderPrimitiveProps;
-
-function DialogHeader({ className, ...props }: DialogHeaderProps) {
-	return (
-		<DialogHeaderPrimitive className={cn("flex flex-col gap-2 text-center sm:text-start", className)} {...props} />
-	);
-}
-
-type DialogFooterProps = DialogFooterPrimitiveProps;
-
-function DialogFooter({ className, ...props }: DialogFooterProps) {
-	return (
-		<DialogFooterPrimitive
-			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+		<DialogPrimitive.Backdrop
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",
+				className,
+			)}
 			{...props}
 		/>
 	);
 }
 
-type DialogTitleProps = DialogTitlePrimitiveProps;
-
-function DialogTitle({ className, ...props }: DialogTitleProps) {
-	return <DialogTitlePrimitive className={cn("font-semibold text-lg leading-none", className)} {...props} />;
+function DialogContent({
+	className,
+	children,
+	showClose = false,
+	...props
+}: DialogPrimitive.Popup.Props & {
+	showClose?: boolean;
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Popup
+				data-slot="dialog-content"
+				className={cn(
+					"data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 text-sm outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in sm:max-w-2xl",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showClose && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
+					>
+						<XIcon />
+						<span className="sr-only">
+							<Trans>Close</Trans>
+						</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Popup>
+		</DialogPortal>
+	);
 }
 
-type DialogDescriptionProps = DialogDescriptionPrimitiveProps;
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />;
+}
 
-function DialogDescription({ className, ...props }: DialogDescriptionProps) {
-	return <DialogDescriptionPrimitive className={cn("text-muted-foreground text-sm", className)} {...props} />;
+function DialogFooter({ className, children, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+	return (
+		<DialogPrimitive.Title data-slot="dialog-title" className={cn("font-medium leading-none", className)} {...props} />
+	);
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				"text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
 	Dialog,
-	DialogTrigger,
 	DialogClose,
 	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
 	DialogDescription,
-	type DialogProps,
-	type DialogTriggerProps,
-	type DialogCloseProps,
-	type DialogContentProps,
-	type DialogHeaderProps,
-	type DialogFooterProps,
-	type DialogTitleProps,
-	type DialogDescriptionProps,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
 };

src/components/ui/dropdown-menu.tsx

@@ -1,86 +1,87 @@
-import { CaretRightIcon, CheckIcon, CircleIcon } from "@phosphor-icons/react";
-import {
-	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,
-	type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,
-	DropdownMenuContent as DropdownMenuContentPrimitive,
-	type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,
-	DropdownMenuGroup as DropdownMenuGroupPrimitive,
-	type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,
-	DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
-	DropdownMenuItem as DropdownMenuItemPrimitive,
-	type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,
-	DropdownMenuLabel as DropdownMenuLabelPrimitive,
-	type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,
-	DropdownMenu as DropdownMenuPrimitive,
-	type DropdownMenuProps as DropdownMenuPrimitiveProps,
-	DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,
-	type DropdownMenuRadioGroupProps as DropdownMenuRadioGroupPrimitiveProps,
-	DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,
-	type DropdownMenuRadioItemProps as DropdownMenuRadioItemPrimitiveProps,
-	DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,
-	type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,
-	DropdownMenuShortcut as DropdownMenuShortcutPrimitive,
-	type DropdownMenuShortcutProps as DropdownMenuShortcutPrimitiveProps,
-	DropdownMenuSubContent as DropdownMenuSubContentPrimitive,
-	type DropdownMenuSubContentProps as DropdownMenuSubContentPrimitiveProps,
-	DropdownMenuSub as DropdownMenuSubPrimitive,
-	type DropdownMenuSubProps as DropdownMenuSubPrimitiveProps,
-	DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,
-	type DropdownMenuSubTriggerProps as DropdownMenuSubTriggerPrimitiveProps,
-	DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
-	type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,
-} from "@/components/primitives/dropdown-menu";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import type * as React from "react";
 import { cn } from "@/utils/style";
 
-type DropdownMenuProps = DropdownMenuPrimitiveProps;
-
-function DropdownMenu(props: DropdownMenuProps) {
-	return <DropdownMenuPrimitive {...props} />;
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-type DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;
-
-function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
-	return <DropdownMenuTriggerPrimitive {...props} />;
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+	return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-type DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+	return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
 
-function DropdownMenuContent({ sideOffset = 4, className, children, ...props }: DropdownMenuContentProps) {
+function DropdownMenuContent({
+	align = "start",
+	alignOffset = 0,
+	side = "bottom",
+	sideOffset = 4,
+	className,
+	...props
+}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
 	return (
-		<DropdownMenuContentPrimitive
-			sideOffset={sideOffset}
-			className={cn(
-				"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</DropdownMenuContentPrimitive>
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
+				className="isolate z-50 outline-none"
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+			>
+				<MenuPrimitive.Popup
+					data-slot="dropdown-menu-content"
+					className={cn(
+						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in data-closed:overflow-hidden",
+						className,
+					)}
+					{...props}
+				/>
+			</MenuPrimitive.Positioner>
+		</MenuPrimitive.Portal>
 	);
 }
 
-type DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;
-
-function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {
-	return <DropdownMenuGroupPrimitive {...props} />;
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+	return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
-type DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & {
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: MenuPrimitive.GroupLabel.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<MenuPrimitive.GroupLabel
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:pl-8", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: MenuPrimitive.Item.Props & {
 	inset?: boolean;
 	variant?: "default" | "destructive";
-};
-
-function DropdownMenuItem({ className, inset, variant = "default", disabled, ...props }: DropdownMenuItemProps) {
+}) {
 	return (
-		<DropdownMenuItemPrimitive
-			disabled={disabled}
+		<MenuPrimitive.Item
+			data-slot="dropdown-menu-item"
 			data-inset={inset}
 			data-variant={variant}
 			className={cn(
-				"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-inset:ps-8 data-[variant=destructive]:text-destructive data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!",
-				"data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground dark:data-[variant=destructive]:data-highlighted:bg-destructive/20",
+				"group/dropdown-menu-item relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive",
 				className,
 			)}
 			{...props}
@@ -88,126 +89,142 @@ function DropdownMenuItem({ className, inset, variant = "default", disabled, ...
 	);
 }
 
-type DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+	return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
 
-function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...props }: DropdownMenuCheckboxItemProps) {
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+	inset?: boolean;
+}) {
 	return (
-		<DropdownMenuCheckboxItemPrimitive
-			disabled={disabled}
+		<MenuPrimitive.SubmenuTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-				"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+				"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-popup-open:bg-accent data-inset:pl-8 data-open:text-accent-foreground data-popup-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<CaretRightIcon className="ml-auto" />
+		</MenuPrimitive.SubmenuTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	align = "start",
+	alignOffset = -3,
+	side = "right",
+	sideOffset = 0,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+	return (
+		<DropdownMenuContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"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 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
+				className,
+			)}
+			align={align}
+			alignOffset={alignOffset}
+			side={side}
+			sideOffset={sideOffset}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	inset,
+	...props
+}: MenuPrimitive.CheckboxItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<MenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			data-inset={inset}
+			className={cn(
+				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			checked={checked}
 			{...props}
 		>
-			<span className="pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center">
-				<DropdownMenuItemIndicatorPrimitive initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }}>
-					<CheckIcon className="size-4" />
-				</DropdownMenuItemIndicatorPrimitive>
+			<span
+				className="pointer-events-none absolute right-2 flex items-center justify-center"
+				data-slot="dropdown-menu-checkbox-item-indicator"
+			>
+				<MenuPrimitive.CheckboxItemIndicator>
+					<CheckIcon />
+				</MenuPrimitive.CheckboxItemIndicator>
 			</span>
 			{children}
-		</DropdownMenuCheckboxItemPrimitive>
+		</MenuPrimitive.CheckboxItem>
 	);
 }
 
-type DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;
-
-function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {
-	return <DropdownMenuRadioGroupPrimitive {...props} />;
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+	return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
-type DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;
-
-function DropdownMenuRadioItem({ className, children, disabled, ...props }: DropdownMenuRadioItemProps) {
+function DropdownMenuRadioItem({
+	className,
+	children,
+	inset,
+	...props
+}: MenuPrimitive.RadioItem.Props & {
+	inset?: boolean;
+}) {
 	return (
-		<DropdownMenuRadioItemPrimitive
-			disabled={disabled}
+		<MenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			data-inset={inset}
 			className={cn(
-				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-				"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+				"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				className,
 			)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center">
-				<DropdownMenuItemIndicatorPrimitive layoutId="dropdown-menu-item-indicator-radio">
-					<CircleIcon className="size-2 fill-current" />
-				</DropdownMenuItemIndicatorPrimitive>
+			<span
+				className="pointer-events-none absolute right-2 flex items-center justify-center"
+				data-slot="dropdown-menu-radio-item-indicator"
+			>
+				<MenuPrimitive.RadioItemIndicator>
+					<CheckIcon />
+				</MenuPrimitive.RadioItemIndicator>
 			</span>
 			{children}
-		</DropdownMenuRadioItemPrimitive>
+		</MenuPrimitive.RadioItem>
 	);
 }
 
-type DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {
-	inset?: boolean;
-};
-
-function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
 	return (
-		<DropdownMenuLabelPrimitive
-			data-inset={inset}
-			className={cn("px-2 py-1.5 font-medium text-sm data-inset:ps-8", className)}
+		<MenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("-mx-1 my-1 h-px bg-border", className)}
 			{...props}
 		/>
 	);
 }
 
-type DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;
-
-function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps) {
-	return <DropdownMenuSeparatorPrimitive className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />;
-}
-
-type DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;
-
-function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps) {
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
 	return (
-		<DropdownMenuShortcutPrimitive
-			className={cn("ml-auto text-muted-foreground text-xs tracking-widest", className)}
-			{...props}
-		/>
-	);
-}
-
-type DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;
-
-function DropdownMenuSub(props: DropdownMenuSubProps) {
-	return <DropdownMenuSubPrimitive {...props} />;
-}
-
-type DropdownMenuSubTriggerProps = DropdownMenuSubTriggerPrimitiveProps & {
-	inset?: boolean;
-};
-
-function DropdownMenuSubTrigger({ disabled, className, inset, children, ...props }: DropdownMenuSubTriggerProps) {
-	return (
-		<DropdownMenuSubTriggerPrimitive
-			disabled={disabled}
-			data-inset={inset}
+		<span
+			data-slot="dropdown-menu-shortcut"
 			className={cn(
-				"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-inset:ps-8 data-[state=open]:text-accent-foreground",
-				"data-[state=open]:**:data-[slot=chevron]:rotate-90 **:data-[slot=chevron]:transition-transform **:data-[slot=chevron]:duration-300 **:data-[slot=chevron]:ease-in-out",
-				"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<CaretRightIcon data-slot="chevron" className="ml-auto size-4" />
-		</DropdownMenuSubTriggerPrimitive>
-	);
-}
-
-type DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;
-
-function DropdownMenuSubContent({ className, ...props }: DropdownMenuSubContentProps) {
-	return (
-		<DropdownMenuSubContentPrimitive
-			className={cn(
-				"z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg outline-none",
+				"ml-auto text-muted-foreground text-xs tracking-widest group-focus/dropdown-menu-item:text-accent-foreground",
 				className,
 			)}
 			{...props}
@@ -217,31 +234,18 @@ function DropdownMenuSubContent({ className, ...props }: DropdownMenuSubContentP
 
 export {
 	DropdownMenu,
-	DropdownMenuTrigger,
+	DropdownMenuCheckboxItem,
 	DropdownMenuContent,
 	DropdownMenuGroup,
 	DropdownMenuItem,
-	DropdownMenuCheckboxItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
 	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
-	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuShortcut,
 	DropdownMenuSub,
-	DropdownMenuSubTrigger,
 	DropdownMenuSubContent,
-	type DropdownMenuProps,
-	type DropdownMenuTriggerProps,
-	type DropdownMenuContentProps,
-	type DropdownMenuGroupProps,
-	type DropdownMenuItemProps,
-	type DropdownMenuCheckboxItemProps,
-	type DropdownMenuRadioGroupProps,
-	type DropdownMenuRadioItemProps,
-	type DropdownMenuLabelProps,
-	type DropdownMenuSeparatorProps,
-	type DropdownMenuShortcutProps,
-	type DropdownMenuSubProps,
-	type DropdownMenuSubTriggerProps,
-	type DropdownMenuSubContentProps,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
 };

src/components/ui/form.tsx

@@ -1,6 +1,5 @@
+import { useRender } from "@base-ui/react";
 import { isPlainObject } from "es-toolkit";
-import type { Label as LabelPrimitive } from "radix-ui";
-import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 import {
 	Controller,
@@ -76,7 +75,7 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
 	);
 }
 
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
 	const { error, formItemId } = useFormField();
 
 	return (
@@ -90,18 +89,21 @@ function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPri
 	);
 }
 
-function FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {
+function FormControl(props: useRender.ComponentProps<"div">) {
 	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
-	return (
-		<SlotPrimitive.Slot
-			data-slot="form-control"
-			id={formItemId}
-			aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-			aria-invalid={!!error}
-			{...props}
-		/>
-	);
+	return useRender({
+		...props,
+		defaultTagName: "div",
+		state: { slot: "form-control" },
+		props: {
+			id: formItemId,
+			"data-slot": "form-control",
+			"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+			"aria-invalid": !!error,
+			...props,
+		},
+	});
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -152,4 +154,4 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
 	);
 }
 
-export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };

src/components/ui/hover-card.tsx

@@ -1,35 +1,43 @@
-import { HoverCard as HoverCardPrimitive } from "radix-ui";
-import type * as React from "react";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
 import { cn } from "@/utils/style";
 
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+	return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-	return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+	return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
 }
 
 function HoverCardContent({
 	className,
-	align = "center",
+	side = "bottom",
 	sideOffset = 4,
+	align = "center",
+	alignOffset = 4,
 	...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+}: PreviewCardPrimitive.Popup.Props &
+	Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
 	return (
-		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
-			<HoverCardPrimitive.Content
-				data-slot="hover-card-content"
+		<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+			<PreviewCardPrimitive.Positioner
 				align={align}
+				alignOffset={alignOffset}
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
-					className,
-				)}
-				{...props}
-			/>
-		</HoverCardPrimitive.Portal>
+				className="isolate z-50"
+			>
+				<PreviewCardPrimitive.Popup
+					data-slot="hover-card-content"
+					className={cn(
+						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
+						className,
+					)}
+					{...props}
+				/>
+			</PreviewCardPrimitive.Positioner>
+		</PreviewCardPrimitive.Portal>
 	);
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardContent, HoverCardTrigger };

src/components/ui/input-group.tsx

@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="input-group"
 			role="group"
 			className={cn(
-				"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-ring has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+				"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
 				className,
 			)}
 			{...props}
@@ -24,8 +24,8 @@ const inputGroupAddonVariants = cva(
 	{
 		variants: {
 			align: {
-				"inline-start": "order-first ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem]",
-				"inline-end": "order-last pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem]",
+				"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+				"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
 				"block-start":
 					"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
 				"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
@@ -73,21 +73,25 @@ const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-non
 	},
 });
 
+type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+	VariantProps<typeof inputGroupButtonVariants> & {
+		type?: "button" | "submit" | "reset";
+	};
+
 function InputGroupButton({
 	className,
 	type = "button",
 	variant = "ghost",
 	size = "xs",
 	...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
+}: InputGroupButtonProps) {
 	return (
 		<Button
-			{...props}
 			type={type}
-			asChild={false}
 			data-size={size}
 			variant={variant}
 			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
 		/>
 	);
 }
@@ -109,7 +113,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<"input">)
 		<Input
 			data-slot="input-group-control"
 			className={cn(
-				"flex-1 rounded-none border-0 bg-transparent shadow-none hover:bg-secondary/40 focus-visible:bg-secondary/40 aria-invalid:ring-0",
+				"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
 				className,
 			)}
 			{...props}
@@ -122,7 +126,7 @@ function InputGroupTextarea({ className, ...props }: React.ComponentProps<"texta
 		<Textarea
 			data-slot="input-group-control"
 			className={cn(
-				"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none aria-invalid:ring-0 dark:bg-transparent",
+				"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
 				className,
 			)}
 			{...props}
@@ -130,4 +134,4 @@ function InputGroupTextarea({ className, ...props }: React.ComponentProps<"texta
 	);
 }
 
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

src/components/ui/input-otp.tsx

@@ -77,4 +77,4 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
 	);
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

src/components/ui/input.tsx

@@ -1,13 +1,14 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
 import type * as React from "react";
 import { cn } from "@/utils/style";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (
-		<input
+		<InputPrimitive
 			type={type}
 			data-slot="input"
 			className={cn(
-				"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground hover:bg-secondary/40 focus-visible:border-ring focus-visible:bg-secondary/40 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 				className,
 			)}
 			{...props}

src/components/ui/label.tsx

@@ -1,10 +1,9 @@
-import { Label as LabelPrimitive } from "radix-ui";
 import type * as React from "react";
 import { cn } from "@/utils/style";
 
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<"label">) {
 	return (
-		<LabelPrimitive.Root
+		<label
 			data-slot="label"
 			className={cn(
 				"flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",

src/components/ui/multiple-combobox.tsx

@@ -1,216 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
-import * as React from "react";
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-	CommandSeparator,
-} from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { useControlledState } from "@/hooks/use-controlled-state";
-import { cn } from "@/utils/style";
-
-type MultipleComboboxOption<TValue extends string | number = string> = {
-	value: TValue;
-	label: React.ReactNode;
-	keywords?: string[];
-	disabled?: boolean;
-};
-
-type BasePopoverProps = Omit<React.ComponentProps<typeof PopoverContent>, "value" | "defaultValue" | "children">;
-
-type MultipleComboboxProps<TValue extends string | number = string> = BasePopoverProps & {
-	options: MultipleComboboxOption<TValue>[];
-	value?: TValue[];
-	defaultValue?: TValue[];
-	placeholder?: React.ReactNode;
-	searchPlaceholder?: string;
-	emptyMessage?: React.ReactNode;
-	clearLabel?: React.ReactNode;
-	buttonProps?: Omit<React.ComponentProps<typeof Button>, "children"> & {
-		children?: (values: TValue[], options: MultipleComboboxOption<TValue>[]) => React.ReactNode;
-	};
-	onValueChange?: (values: TValue[], options: MultipleComboboxOption<TValue>[]) => void;
-	onOpenChange?: (open: boolean) => void;
-	disableClear?: boolean;
-};
-
-const CLEAR_COMMAND_VALUE = "__command-clear-multi-select-combobox";
-
-function MultipleCombobox<TValue extends string | number = string>({
-	options,
-	value,
-	defaultValue,
-	placeholder = t`Select...`,
-	searchPlaceholder = t`Search...`,
-	emptyMessage = t`No results found.`,
-	clearLabel = t`Clear selection`,
-	className,
-	buttonProps,
-	onValueChange,
-	onOpenChange,
-	disableClear = false,
-	...popoverProps
-}: MultipleComboboxProps<TValue>) {
-	const [open, setOpen] = React.useState(false);
-
-	const { children: buttonChildren, className: buttonClassName, ...buttonRest } = buttonProps ?? {};
-
-	const resolvedDefaultValue = React.useMemo<TValue[]>(() => (defaultValue ? [...defaultValue] : []), [defaultValue]);
-
-	const optionsByStringValue = React.useMemo(() => {
-		return new Map(options.map((option) => [String(option.value), option]));
-	}, [options]);
-
-	const [selectedValues, setSelectedValues] = useControlledState<TValue[]>({
-		value,
-		defaultValue: resolvedDefaultValue,
-		onChange: (next) =>
-			onValueChange?.(
-				next,
-				next
-					.map((item) => options.find((option) => option.value === item))
-					.filter((option): option is MultipleComboboxOption<TValue> => Boolean(option)),
-			),
-	});
-
-	const selectionSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
-
-	const selectedOptions = React.useMemo(
-		() => options.filter((option) => selectionSet.has(option.value)),
-		[options, selectionSet],
-	);
-
-	const selectionCount = selectedOptions.length;
-	const canClear = !disableClear && selectionCount > 0;
-
-	const toggleOption = React.useCallback(
-		(option: MultipleComboboxOption<TValue>) => {
-			if (option.disabled) return;
-
-			const isSelected = selectionSet.has(option.value);
-			const nextValues = isSelected
-				? selectedValues.filter((selected) => selected !== option.value)
-				: [...selectedValues, option.value];
-
-			setSelectedValues(nextValues);
-		},
-		[selectionSet, selectedValues, setSelectedValues],
-	);
-
-	const handleSelect = React.useCallback(
-		(current: string) => {
-			if (current === CLEAR_COMMAND_VALUE) {
-				setSelectedValues([]);
-				return;
-			}
-
-			const option = optionsByStringValue.get(current);
-			if (!option) return;
-			toggleOption(option);
-		},
-		[optionsByStringValue, toggleOption, setSelectedValues],
-	);
-
-	const handleOpenChange = React.useCallback(
-		(nextOpen: boolean) => {
-			setOpen(nextOpen);
-			onOpenChange?.(nextOpen);
-		},
-		[onOpenChange],
-	);
-
-	const buttonContent =
-		typeof buttonChildren === "function" ? (
-			buttonChildren(selectedValues, selectedOptions)
-		) : (
-			<>
-				<span className="truncate">{selectionCount > 0 ? `${selectionCount} selected` : placeholder}</span>
-				<CaretUpDownIcon aria-hidden className="ms-2 shrink-0 opacity-50" />
-			</>
-		);
-
-	return (
-		<Popover open={open} onOpenChange={handleOpenChange}>
-			<PopoverTrigger asChild>
-				<Button
-					role="combobox"
-					variant="outline"
-					aria-expanded={open}
-					aria-label="Multi-select Combobox"
-					className={cn("justify-between gap-2 font-normal active:scale-100", buttonClassName)}
-					{...buttonRest}
-				>
-					{buttonContent}
-				</Button>
-			</PopoverTrigger>
-
-			<PopoverContent
-				align="start"
-				role="listbox"
-				className={cn("w-[260px] p-0", className)}
-				aria-multiselectable="true"
-				{...popoverProps}
-			>
-				<Command>
-					<CommandInput placeholder={searchPlaceholder} />
-					<CommandList>
-						<CommandEmpty>{emptyMessage}</CommandEmpty>
-
-						<CommandGroup>
-							{options.map((option) => {
-								const stringValue = String(option.value);
-								const isSelected = selectionSet.has(option.value);
-								const isDisabled = option.disabled ?? false;
-
-								return (
-									<CommandItem
-										key={stringValue}
-										value={stringValue}
-										keywords={option.keywords}
-										onSelect={handleSelect}
-										disabled={isDisabled}
-										data-selected={isSelected ? "" : undefined}
-										aria-selected={isSelected}
-									>
-										<CheckIcon
-											aria-hidden
-											className={cn("size-4 shrink-0 transition-opacity", isSelected ? "opacity-100" : "opacity-0")}
-										/>
-										<span className={cn("truncate", isDisabled && "opacity-60")}>{option.label}</span>
-									</CommandItem>
-								);
-							})}
-						</CommandGroup>
-
-						{canClear ? (
-							<>
-								<CommandSeparator />
-								<CommandGroup>
-									<CommandItem
-										value={CLEAR_COMMAND_VALUE}
-										onSelect={handleSelect}
-										keywords={[]}
-										data-selected={undefined}
-										aria-selected="false"
-									>
-										{clearLabel}
-									</CommandItem>
-								</CommandGroup>
-							</>
-						) : null}
-					</CommandList>
-				</Command>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-export type { MultipleComboboxOption, MultipleComboboxProps };
-
-export { MultipleCombobox };

src/components/ui/popover.tsx

@@ -1,51 +1,62 @@
-import { Popover as PopoverPrimitive } from "radix-ui";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import type * as React from "react";
 import { cn } from "@/utils/style";
 
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
 	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
 	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
 	className,
 	align = "center",
+	alignOffset = 0,
+	side = "bottom",
 	sideOffset = 4,
 	...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: PopoverPrimitive.Popup.Props &
+	Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
 	return (
 		<PopoverPrimitive.Portal>
-			<PopoverPrimitive.Content
-				data-slot="popover-content"
+			<PopoverPrimitive.Positioner
 				align={align}
+				alignOffset={alignOffset}
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex min-w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
-					className,
-				)}
-				{...props}
-			/>
+				className="isolate z-50"
+			>
+				<PopoverPrimitive.Popup
+					data-slot="popover-content"
+					className={cn(
+						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
+						className,
+					)}
+					{...props}
+				/>
+			</PopoverPrimitive.Positioner>
 		</PopoverPrimitive.Portal>
 	);
 }
 
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
 function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
 	return <div data-slot="popover-header" className={cn("flex flex-col gap-1 text-sm", className)} {...props} />;
 }
 
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
-	return <div data-slot="popover-title" className={cn("font-medium", className)} {...props} />;
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+	return <PopoverPrimitive.Title data-slot="popover-title" className={cn("font-medium", className)} {...props} />;
 }
 
-function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {
-	return <p data-slot="popover-description" className={cn("text-muted-foreground", className)} {...props} />;
+function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
+	return (
+		<PopoverPrimitive.Description
+			data-slot="popover-description"
+			className={cn("text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

src/components/ui/scroll-area.tsx

@@ -1,13 +1,12 @@
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import type * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import { cn } from "@/utils/style";
 
-function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
 	return (
 		<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
 			<ScrollAreaPrimitive.Viewport
 				data-slot="scroll-area-viewport"
-				className="[&>div]:block! size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+				className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
 			>
 				{children}
 			</ScrollAreaPrimitive.Viewport>
@@ -17,13 +16,9 @@ function ScrollArea({ className, children, ...props }: React.ComponentProps<type
 	);
 }
 
-function ScrollBar({
-	className,
-	orientation = "vertical",
-	...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+function ScrollBar({ className, orientation = "vertical", ...props }: ScrollAreaPrimitive.Scrollbar.Props) {
 	return (
-		<ScrollAreaPrimitive.ScrollAreaScrollbar
+		<ScrollAreaPrimitive.Scrollbar
 			data-slot="scroll-area-scrollbar"
 			data-orientation={orientation}
 			orientation={orientation}
@@ -33,11 +28,8 @@ function ScrollBar({
 			)}
 			{...props}
 		>
-			<ScrollAreaPrimitive.ScrollAreaThumb
-				data-slot="scroll-area-thumb"
-				className="relative flex-1 rounded-full bg-border"
-			/>
-		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+			<ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" className="relative flex-1 rounded-full bg-border" />
+		</ScrollAreaPrimitive.Scrollbar>
 	);
 }
 

src/components/ui/separator.tsx

@@ -1,20 +1,13 @@
-import { Separator as SeparatorPrimitive } from "radix-ui";
-import type * as React from "react";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import { cn } from "@/utils/style";
 
-function Separator({
-	className,
-	orientation = "horizontal",
-	decorative = true,
-	...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
 	return (
-		<SeparatorPrimitive.Root
+		<SeparatorPrimitive
 			data-slot="separator"
-			decorative={decorative}
 			orientation={orientation}
 			className={cn(
-				"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+				"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
 				className,
 			)}
 			{...props}

src/components/ui/sheet.tsx

@@ -1,31 +1,32 @@
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { Trans } from "@lingui/react/macro";
 import { XIcon } from "@phosphor-icons/react";
-import { Dialog as SheetPrimitive } from "radix-ui";
 import type * as React from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/utils/style";
 
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
 	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
 	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
 	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
 	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
-function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
 	return (
-		<SheetPrimitive.Overlay
+		<SheetPrimitive.Backdrop
 			data-slot="sheet-overlay"
 			className={cn(
-				"data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+				"data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
 				className,
 			)}
 			{...props}
@@ -37,34 +38,37 @@ function SheetContent({
 	className,
 	children,
 	side = "right",
-	showCloseButton = true,
+	showClose = true,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+}: SheetPrimitive.Popup.Props & {
 	side?: "top" | "right" | "bottom" | "left";
-	showCloseButton?: boolean;
+	showClose?: boolean;
 }) {
 	return (
 		<SheetPortal>
 			<SheetOverlay />
-			<SheetPrimitive.Content
+			<SheetPrimitive.Popup
 				data-slot="sheet-content"
 				data-side={side}
 				className={cn(
-					"data-[side=right]:data-closed:slide-out-to-end-10 data-[side=right]:data-open:slide-in-from-end-10 data-[side=left]:data-closed:slide-out-to-start-10 data-[side=left]:data-open:slide-in-from-start-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=left]:inset-s-0 data-[side=right]:inset-e-0 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+					"data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
 					className,
 				)}
 				{...props}
 			>
 				{children}
-				{showCloseButton && (
-					<SheetPrimitive.Close data-slot="sheet-close" asChild>
-						<Button variant="ghost" className="absolute inset-e-4 top-4" size="icon-sm">
-							<XIcon />
-							<span className="sr-only">Close</span>
-						</Button>
+				{showClose && (
+					<SheetPrimitive.Close
+						data-slot="sheet-close"
+						render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
+					>
+						<XIcon />
+						<span className="sr-only">
+							<Trans>Close</Trans>
+						</span>
 					</SheetPrimitive.Close>
 				)}
-			</SheetPrimitive.Content>
+			</SheetPrimitive.Popup>
 		</SheetPortal>
 	);
 }
@@ -77,13 +81,13 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
 	return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
 }
 
-function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
 	return (
 		<SheetPrimitive.Title data-slot="sheet-title" className={cn("font-medium text-foreground", className)} {...props} />
 	);
 }
 
-function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
 	return (
 		<SheetPrimitive.Description
 			data-slot="sheet-description"
@@ -93,4 +97,4 @@ function SheetDescription({ className, ...props }: React.ComponentProps<typeof S
 	);
 }
 
-export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

src/components/ui/sidebar.tsx

@@ -1,18 +1,21 @@
-import { SidebarSimpleIcon } from "@phosphor-icons/react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { SidebarIcon } from "@phosphor-icons/react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Slot as SlotPrimitive } from "radix-ui";
 import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/utils/style";
 
-const SIDEBAR_WIDTH = "18rem";
-const SIDEBAR_WIDTH_MOBILE = "16rem";
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
@@ -32,7 +35,7 @@ function useSidebarState() {
 	const context = React.useContext(SidebarContext);
 
 	if (!context) {
-		throw new Error("useSidebarState must be used within a <SidebarProvider />.");
+		throw new Error("useSidebarState must be used within a SidebarProvider.");
 	}
 
 	return context;
@@ -58,13 +61,18 @@ function SidebarProvider({
 	// We use openProp and setOpenProp for control from outside the component.
 	const [_open, _setOpen] = React.useState(defaultOpen);
 	const open = openProp ?? _open;
-
 	const setOpen = React.useCallback(
 		(value: boolean | ((value: boolean) => boolean)) => {
 			const openState = typeof value === "function" ? value(open) : value;
 
-			setOpenProp?.(openState);
-			_setOpen(openState);
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// biome-ignore lint/suspicious/noDocumentCookie: it's ok
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 		},
 		[setOpenProp, open],
 	);
@@ -72,7 +80,7 @@ function SidebarProvider({
 	// Helper to toggle the sidebar.
 	const toggleSidebar = React.useCallback(() => {
 		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-	}, [isMobile, setOpen]);
+	}, [isMobile, setOpen, setOpenMobile]);
 
 	// Adds a keyboard shortcut to toggle the sidebar.
 	React.useEffect(() => {
@@ -101,28 +109,25 @@ function SidebarProvider({
 			setOpenMobile,
 			toggleSidebar,
 		}),
-		[state, open, setOpen, isMobile, openMobile, toggleSidebar],
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
 	);
 
 	return (
 		<SidebarContext.Provider value={contextValue}>
-			<TooltipProvider delayDuration={0}>
-				<div
-					data-slot="sidebar-wrapper"
-					style={
-						{
-							"--sidebar-width": SIDEBAR_WIDTH,
-							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-							...style,
-						} as React.CSSProperties
-					}
-					className={cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className)}
-					suppressHydrationWarning
-					{...props}
-				>
-					{children}
-				</div>
-			</TooltipProvider>
+			<div
+				data-slot="sidebar-wrapper"
+				style={
+					{
+						"--sidebar-width": SIDEBAR_WIDTH,
+						"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+						...style,
+					} as React.CSSProperties
+				}
+				className={cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className)}
+				{...props}
+			>
+				{children}
+			</div>
 		</SidebarContext.Provider>
 	);
 }
@@ -133,6 +138,7 @@ function Sidebar({
 	collapsible = "offcanvas",
 	className,
 	children,
+	dir,
 	...props
 }: React.ComponentProps<"div"> & {
 	side?: "left" | "right";
@@ -157,6 +163,7 @@ function Sidebar({
 		return (
 			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
 				<SheetContent
+					dir={dir}
 					data-sidebar="sidebar"
 					data-slot="sidebar"
 					data-mobile="true"
@@ -187,26 +194,26 @@ function Sidebar({
 			data-side={side}
 			data-slot="sidebar"
 		>
+			{/* This is what handles the sidebar gap on desktop */}
 			<div
 				data-slot="sidebar-gap"
 				className={cn(
-					"relative w-(--sidebar-width) bg-transparent transition-[width] ease-in-out",
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
 					"group-data-[collapsible=offcanvas]:w-0",
 					"group-data-[side=right]:rotate-180",
 					variant === "floating" || variant === "inset"
-						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon))]"
 						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
 				)}
 			/>
 			<div
 				data-slot="sidebar-container"
+				data-side={side}
 				className={cn(
-					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-in-out md:flex",
-					side === "left"
-						? "inset-s-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-						: "inset-e-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] md:flex",
+					// Adjust the padding for floating and inset variants.
 					variant === "floating" || variant === "inset"
-						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+2px)]"
 						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
 					className,
 				)}
@@ -215,7 +222,7 @@ function Sidebar({
 				<div
 					data-sidebar="sidebar"
 					data-slot="sidebar-inner"
-					className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-md group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border"
+					className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
 				>
 					{children}
 				</div>
@@ -232,15 +239,15 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 			data-sidebar="trigger"
 			data-slot="sidebar-trigger"
 			variant="ghost"
-			size="icon"
-			className={cn("size-7", className)}
+			size="icon-sm"
+			className={cn(className)}
 			onClick={(event) => {
 				onClick?.(event);
 				toggleSidebar();
 			}}
 			{...props}
 		>
-			<SidebarSimpleIcon />
+			<SidebarIcon />
 			<span className="sr-only">Toggle Sidebar</span>
 		</Button>
 	);
@@ -258,12 +265,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 			onClick={toggleSidebar}
 			title="Toggle Sidebar"
 			className={cn(
-				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-in-out after:absolute after:inset-s-1/2 after:inset-y-0 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-inset-e-4 group-data-[side=right]:inset-s-0 sm:flex",
+				"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-s-1/2 after:inset-y-0 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
 				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
 				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
 				"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
-				"[[data-side=left][data-collapsible=offcanvas]_&]:-inset-e-2",
-				"[[data-side=right][data-collapsible=offcanvas]_&]:-inset-s-2",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
 				className,
 			)}
 			{...props}
@@ -276,8 +283,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
 		<main
 			data-slot="sidebar-inset"
 			className={cn(
-				"relative flex w-full flex-1 flex-col bg-background",
-				"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-md",
+				"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
 				className,
 			)}
 			{...props}
@@ -290,7 +296,7 @@ function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input
 		<Input
 			data-slot="sidebar-input"
 			data-sidebar="input"
-			className={cn("h-8 w-full bg-background", className)}
+			className={cn("h-8 w-full bg-background shadow-none", className)}
 			{...props}
 		/>
 	);
@@ -323,7 +329,7 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
 		<Separator
 			data-slot="sidebar-separator"
 			data-sidebar="separator"
-			className={cn("w-auto bg-sidebar-border", className)}
+			className={cn("mx-2 w-auto bg-sidebar-border", className)}
 			{...props}
 		/>
 	);
@@ -335,7 +341,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
 			data-slot="sidebar-content"
 			data-sidebar="content"
 			className={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
 				className,
 			)}
 			{...props}
@@ -356,45 +362,50 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
 
 function SidebarGroupLabel({
 	className,
-	asChild = false,
+	render,
 	...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-	const Comp = asChild ? SlotPrimitive.Root : "div";
-
-	return (
-		<Comp
-			data-slot="sidebar-group-label"
-			data-sidebar="group-label"
-			className={cn(
-				"flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] ease-in-out focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "sidebar-group-label",
+			sidebar: "group-label",
+		},
+	});
 }
 
 function SidebarGroupAction({
 	className,
-	asChild = false,
+	render,
 	...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-	const Comp = asChild ? SlotPrimitive.Root : "button";
-
-	return (
-		<Comp
-			data-slot="sidebar-group-action"
-			data-sidebar="group-action"
-			className={cn(
-				"absolute inset-e-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-				"after:absolute after:-inset-2 md:after:hidden",
-				"group-data-[collapsible=icon]:hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps<"button">(
+			{
+				className: cn(
+					"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 group-data-[collapsible=icon]:hidden md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "sidebar-group-action",
+			sidebar: "group-action",
+		},
+	});
 }
 
 function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -431,12 +442,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
 				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-				outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
 			},
 			size: {
 				default: "h-8 text-sm",
@@ -452,45 +464,34 @@ const sidebarMenuButtonVariants = cva(
 );
 
 function SidebarMenuButton({
-	asChild = false,
 	isActive = false,
 	variant = "default",
 	size = "default",
 	tooltip,
 	className,
+	render,
 	...props
-}: React.ComponentProps<"button"> & {
-	asChild?: boolean;
-	isActive?: boolean;
-	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-	const Comp = asChild ? SlotPrimitive.Root : "button";
+}: useRender.ComponentProps<"button"> &
+	React.ComponentProps<"button"> & {
+		isActive?: boolean;
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+	} & VariantProps<typeof sidebarMenuButtonVariants>) {
 	const { isMobile, state } = useSidebarState();
 
-	const button = (
-		<Comp
-			data-slot="sidebar-menu-button"
-			data-sidebar="menu-button"
-			data-size={size}
-			data-active={isActive}
-			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-			{...props}
-		/>
-	);
+	const children = useRender({
+		defaultTagName: "button",
+		render: !tooltip ? render : <TooltipTrigger render={render} />,
+		state: { size, slot: "sidebar-menu-button", sidebar: "menu-button", active: isActive },
+		props: mergeProps<"button">({ className: cn(sidebarMenuButtonVariants({ variant, size }), className) }, props),
+	});
 
-	if (!tooltip) {
-		return button;
-	}
+	if (!tooltip) return children;
 
-	if (typeof tooltip === "string") {
-		tooltip = {
-			children: tooltip,
-		};
-	}
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
 
 	return (
 		<Tooltip>
-			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			{children}
 			<TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
 		</Tooltip>
 	);
@@ -498,33 +499,32 @@ function SidebarMenuButton({
 
 function SidebarMenuAction({
 	className,
-	asChild = false,
+	render,
 	showOnHover = false,
 	...props
-}: React.ComponentProps<"button"> & {
-	asChild?: boolean;
-	showOnHover?: boolean;
-}) {
-	const Comp = asChild ? SlotPrimitive.Root : "button";
-
-	return (
-		<Comp
-			data-slot="sidebar-menu-action"
-			data-sidebar="menu-action"
-			className={cn(
-				"absolute inset-e-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-				"after:absolute after:-inset-2 md:after:hidden",
-				"peer-data-[size=sm]/menu-button:top-1",
-				"peer-data-[size=default]/menu-button:top-1.5",
-				"peer-data-[size=lg]/menu-button:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
-				showOnHover &&
-					"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
+}: useRender.ComponentProps<"button"> &
+	React.ComponentProps<"button"> & {
+		showOnHover?: boolean;
+	}) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps<"button">(
+			{
+				className: cn(
+					"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+					showOnHover &&
+						"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "sidebar-menu-action",
+			sidebar: "menu-action",
+		},
+	});
 }
 
 function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
@@ -533,12 +533,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">)
 			data-slot="sidebar-menu-badge"
 			data-sidebar="menu-badge"
 			className={cn(
-				"pointer-events-none absolute inset-e-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
-				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-				"peer-data-[size=sm]/menu-button:top-1",
-				"peer-data-[size=default]/menu-button:top-1.5",
-				"peer-data-[size=lg]/menu-button:top-2.5",
-				"group-data-[collapsible=icon]:hidden",
+				"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
 				className,
 			)}
 			{...props}
@@ -553,9 +548,10 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<"div"> & {
 	showIcon?: boolean;
 }) {
-	const width = React.useMemo(() => {
+	// Random width between 50 to 90%.
+	const [width] = React.useState(() => {
 		return `${Math.floor(Math.random() * 40) + 50}%`;
-	}, []);
+	});
 
 	return (
 		<div
@@ -564,7 +560,7 @@ function SidebarMenuSkeleton({
 			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
 			{...props}
 		>
-			{showIcon && <Skeleton className="size-4 rounded" data-sidebar="menu-skeleton-icon" />}
+			{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
 			<Skeleton
 				className="h-4 max-w-(--skeleton-width) flex-1"
 				data-sidebar="menu-skeleton-text"
@@ -584,8 +580,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
 			data-slot="sidebar-menu-sub"
 			data-sidebar="menu-sub"
 			className={cn(
-				"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
-				"group-data-[collapsible=icon]:hidden",
+				"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
 				className,
 			)}
 			{...props}
@@ -605,35 +600,35 @@ function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">)
 }
 
 function SidebarMenuSubButton({
-	asChild = false,
+	render,
 	size = "md",
 	isActive = false,
 	className,
 	...props
-}: React.ComponentProps<"a"> & {
-	asChild?: boolean;
-	size?: "sm" | "md";
-	isActive?: boolean;
-}) {
-	const Comp = asChild ? SlotPrimitive.Root : "a";
-
-	return (
-		<Comp
-			data-slot="sidebar-menu-sub-button"
-			data-sidebar="menu-sub-button"
-			data-size={size}
-			data-active={isActive}
-			className={cn(
-				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-				size === "sm" && "text-xs",
-				size === "md" && "text-sm",
-				"group-data-[collapsible=icon]:hidden",
-				className,
-			)}
-			{...props}
-		/>
-	);
+}: useRender.ComponentProps<"a"> &
+	React.ComponentProps<"a"> & {
+		size?: "sm" | "md";
+		isActive?: boolean;
+	}) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn(
+					"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-[size=md]:text-sm data-[size=sm]:text-xs data-active:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "sidebar-menu-sub-button",
+			sidebar: "menu-sub-button",
+			size,
+			active: isActive,
+		},
+	});
 }
 
 export {

src/components/ui/slider.tsx

@@ -1,15 +1,8 @@
-import { Slider as SliderPrimitive } from "radix-ui";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import * as React from "react";
 import { cn } from "@/utils/style";
 
-function Slider({
-	className,
-	defaultValue,
-	value,
-	min = 0,
-	max = 100,
-	...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: SliderPrimitive.Root.Props) {
 	const _values = React.useMemo(
 		() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
 		[value, defaultValue, min, max],
@@ -17,33 +10,33 @@ function Slider({
 
 	return (
 		<SliderPrimitive.Root
+			className={cn("data-vertical:h-full data-horizontal:w-full", className)}
 			data-slot="slider"
 			defaultValue={defaultValue}
 			value={value}
 			min={min}
 			max={max}
-			className={cn(
-				"relative flex w-full touch-none select-none items-center data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50",
-				className,
-			)}
+			thumbAlignment="edge"
 			{...props}
 		>
-			<SliderPrimitive.Track
-				data-slot="slider-track"
-				className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-vertical:h-full data-horizontal:w-full data-vertical:w-1.5"
-			>
-				<SliderPrimitive.Range
-					data-slot="slider-range"
-					className="absolute select-none bg-primary data-horizontal:h-full data-vertical:w-full"
-				/>
-			</SliderPrimitive.Track>
-			{Array.from({ length: _values.length }, (_, index) => (
-				<SliderPrimitive.Thumb
-					data-slot="slider-thumb"
-					key={index}
-					className="block size-4 shrink-0 select-none rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
-				/>
-			))}
+			<SliderPrimitive.Control className="relative flex w-full touch-none select-none items-center data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50">
+				<SliderPrimitive.Track
+					data-slot="slider-track"
+					className="relative grow select-none overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-vertical:h-full data-horizontal:w-full data-vertical:w-1.5"
+				>
+					<SliderPrimitive.Indicator
+						data-slot="slider-range"
+						className="select-none bg-primary data-horizontal:h-full data-vertical:w-full"
+					/>
+				</SliderPrimitive.Track>
+				{Array.from({ length: _values.length }, (_, index) => (
+					<SliderPrimitive.Thumb
+						data-slot="slider-thumb"
+						key={index}
+						className="block size-4 shrink-0 select-none rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+					/>
+				))}
+			</SliderPrimitive.Control>
 		</SliderPrimitive.Root>
 	);
 }

src/components/ui/switch.tsx

@@ -1,64 +1,29 @@
-import type * as React from "react";
-
-import {
-	SwitchIcon as SwitchIconPrimitive,
-	Switch as SwitchPrimitive,
-	type SwitchProps as SwitchPrimitiveProps,
-	SwitchThumb as SwitchThumbPrimitive,
-} from "@/components/primitives/switch";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { cn } from "@/utils/style";
 
-type SwitchProps = SwitchPrimitiveProps & {
-	pressedWidth?: number;
-	startIcon?: React.ReactElement;
-	endIcon?: React.ReactElement;
-	thumbIcon?: React.ReactElement;
-};
-
-function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, ...props }: SwitchProps) {
+function Switch({
+	className,
+	size = "default",
+	...props
+}: SwitchPrimitive.Root.Props & {
+	size?: "sm" | "default";
+}) {
 	return (
-		<SwitchPrimitive
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			data-size={size}
 			className={cn(
-				"peer relative flex h-5 w-8 shrink-0 items-center justify-start rounded-full border border-transparent px-px shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
-				"data-[state=checked]:justify-end data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-all after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=sm]:h-[14px] data-[size=default]:w-[32px] data-[size=sm]:w-[24px] data-disabled:cursor-not-allowed data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-50 dark:data-unchecked:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 				className,
 			)}
 			{...props}
 		>
-			<SwitchThumbPrimitive
-				className={cn(
-					"pointer-events-none relative z-10 block size-4 rounded-full bg-background ring-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
-				)}
-				pressedAnimation={{ width: pressedWidth }}
-			>
-				{thumbIcon && (
-					<SwitchIconPrimitive
-						position="thumb"
-						className="-translate-1/2 absolute inset-s-1/2 top-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
-					>
-						{thumbIcon}
-					</SwitchIconPrimitive>
-				)}
-			</SwitchThumbPrimitive>
-
-			{startIcon && (
-				<SwitchIconPrimitive
-					position="left"
-					className="absolute inset-s-0.5 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
-				>
-					{startIcon}
-				</SwitchIconPrimitive>
-			)}
-			{endIcon && (
-				<SwitchIconPrimitive
-					position="right"
-					className="absolute inset-e-0.5 top-1/2 -translate-y-1/2 text-neutral-500 dark:text-neutral-400 [&_svg]:size-[9px]"
-				>
-					{endIcon}
-				</SwitchIconPrimitive>
-			)}
-		</SwitchPrimitive>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
+			/>
+		</SwitchPrimitive.Root>
 	);
 }
 
-export { Switch, type SwitchProps };
+export { Switch };

src/components/ui/tabs.tsx

@@ -1,9 +1,8 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Tabs as TabsPrimitive } from "radix-ui";
-import type * as React from "react";
 import { cn } from "@/utils/style";
 
-function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
 	return (
 		<TabsPrimitive.Root
 			data-slot="tabs"
@@ -15,7 +14,7 @@ function Tabs({ className, orientation = "horizontal", ...props }: React.Compone
 }
 
 const tabsListVariants = cva(
-	"group/tabs-list inline-flex w-fit items-center justify-center rounded-full px-1.5 py-0.25 text-muted-foreground data-[variant=line]:rounded-none group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+	"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground data-[variant=line]:rounded-none group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
 	{
 		variants: {
 			variant: {
@@ -33,7 +32,7 @@ function TabsList({
 	className,
 	variant = "default",
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
 	return (
 		<TabsPrimitive.List
 			data-slot="tabs-list"
@@ -44,14 +43,14 @@ function TabsList({
 	);
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
 	return (
-		<TabsPrimitive.Trigger
+		<TabsPrimitive.Tab
 			data-slot="tabs-trigger"
 			className={cn(
-				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-				"data-active:bg-background data-active:text-foreground",
+				"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
 				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
 				className,
 			)}
@@ -60,14 +59,10 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 	);
 }
 
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
 	return (
-		<TabsPrimitive.Content
-			data-slot="tabs-content"
-			className={cn("flex-1 text-sm outline-none", className)}
-			{...props}
-		/>
+		<TabsPrimitive.Panel data-slot="tabs-content" className={cn("flex-1 text-sm outline-none", className)} {...props} />
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

src/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				"field-sizing-content flex min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				"field-sizing-content flex min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 				className,
 			)}
 			{...props}

src/components/ui/toggle.tsx

@@ -1,6 +1,5 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Toggle as TogglePrimitive } from "radix-ui";
-import type * as React from "react";
 import { cn } from "@/utils/style";
 
 const toggleVariants = cva(
@@ -29,10 +28,8 @@ function Toggle({
 	variant = "default",
 	size = "default",
 	...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-	return (
-		<TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
-	);
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+	return <TogglePrimitive data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />;
 }
 
-export { Toggle };
+export { Toggle, toggleVariants };

src/components/ui/tooltip.tsx

@@ -1,43 +1,49 @@
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-import type * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 import { cn } from "@/utils/style";
 
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-	return (
-		<TooltipProvider>
-			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
-		</TooltipProvider>
-	);
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
 	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
 	className,
-	sideOffset = 0,
+	side = "top",
+	sideOffset = 4,
+	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(
-					"data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in",
-					className,
-				)}
-				{...props}
+				className="isolate z-50"
 			>
-				{children}
-				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-			</TooltipPrimitive.Content>
+				<TooltipPrimitive.Popup
+					data-slot="tooltip-content"
+					className={cn(
+						"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-background text-xs has-data-[slot=kbd]:pr-1.5 data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+					<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-start]:top-1/2! data-[side=left]:top-1/2! data-[side=right]:top-1/2! data-[side=inline-start]:-right-1 data-[side=left]:-right-1 data-[side=top]:-bottom-2.5 data-[side=inline-end]:-left-1 data-[side=right]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:-translate-y-1/2 data-[side=right]:-translate-y-1/2" />
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
 		</TooltipPrimitive.Portal>
 	);
 }