refactor(ui): remove Radix Slot and use Base UI render composition

apps/web/src/components/ui/button.tsx

···
 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 type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/cn";
 
···
         default:
           "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
         destructive:
-          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive  shadow-destructive/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
         "destructive-outline":
           "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
         ghost:
···
 );
 
 interface ButtonProps extends useRender.ComponentProps<"button"> {
+  asChild?: boolean;
   variant?: VariantProps<typeof buttonVariants>["variant"];
   size?: VariantProps<typeof buttonVariants>["size"];
 }
 
-function Button({ className, variant, size, render, ...props }: ButtonProps) {
+function Button({
+  asChild = false,
+  className,
+  children,
+  variant,
+  size,
+  render,
+  ...props
+}: ButtonProps) {
   const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
     render ? undefined : "button";
 
···
     type: typeValue,
   };
 
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
   return useRender({
     defaultTagName: "button",
-    props: mergeProps<"button">(defaultProps, props),
-    render,
+    props: mergeProps<"button">(defaultProps, {
+      ...props,
+      children: asChild ? undefined : children,
+    }),
+    render: resolvedRender,
   });
 }
 

apps/web/src/components/ui/collapsible.tsx

···
 "use client";
 
 import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import * as React from "react";
 
 import { cn } from "@/lib/cn";
 
···
 }
 
 function CollapsibleTrigger({
+  asChild = false,
   className,
+  children,
   render,
   nativeButton,
   ...props
-}: CollapsiblePrimitive.Trigger.Props) {
+}: CollapsiblePrimitive.Trigger.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
   return (
     <CollapsiblePrimitive.Trigger
       className={cn("cursor-pointer", className)}
       data-slot="collapsible-trigger"
       nativeButton={render ? false : nativeButton}
-      render={render}
+      render={resolvedRender}
       {...props}
-    />
+    >
+      {asChild ? undefined : children}
+    </CollapsiblePrimitive.Trigger>
   );
 }
 

apps/web/src/components/ui/dialog.tsx

···
 
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
+import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
···
 
 const DialogPortal = DialogPrimitive.Portal;
 
-function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+function DialogTrigger({
+  asChild = false,
+  children,
+  render,
+  ...props
+}: DialogPrimitive.Trigger.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
+  return (
+    <DialogPrimitive.Trigger
+      data-slot="dialog-trigger"
+      render={resolvedRender}
+      {...props}
+    >
+      {asChild ? undefined : children}
+    </DialogPrimitive.Trigger>
+  );
 }
 
-function DialogClose(props: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+function DialogClose({
+  asChild = false,
+  children,
+  render,
+  ...props
+}: DialogPrimitive.Close.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
+  return (
+    <DialogPrimitive.Close
+      data-slot="dialog-close"
+      render={resolvedRender}
+      {...props}
+    >
+      {asChild ? undefined : children}
+    </DialogPrimitive.Close>
+  );
 }
 
 function DialogBackdrop({
···
   );
 }
 
-function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+function DialogTitle({
+  asChild = false,
+  className,
+  children,
+  render,
+  ...props
+}: DialogPrimitive.Title.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
   return (
     <DialogPrimitive.Title
       className={cn(
···
         className,
       )}
       data-slot="dialog-title"
+      render={resolvedRender}
       {...props}
-    />
+    >
+      {asChild ? undefined : children}
+    </DialogPrimitive.Title>
   );
 }
 

apps/web/src/components/ui/kbd.tsx

···
   keys,
   className,
   description,
+  separator = "+",
 }: {
   keys: string[];
   className?: string;
   description?: string;
+  separator?: string;
 }) {
   return (
     <KbdGroup aria-label={description} className={className}>
-      {keys.map((key) => (
-        <Kbd key={key}>{key}</Kbd>
+      {keys.map((key, index) => (
+        <span key={key} className="inline-flex items-center gap-1">
+          <Kbd>{key}</Kbd>
+          {separator && index < keys.length - 1 ? (
+            <span className="text-muted-foreground/72 text-xs">
+              {separator}
+            </span>
+          ) : null}
+        </span>
       ))}
     </KbdGroup>
   );

apps/web/src/components/ui/menu.tsx

···
 
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { ChevronRightIcon } from "lucide-react";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/cn";
 
···
 const MenuPortal = MenuPrimitive.Portal;
 
 function MenuTrigger({
+  asChild = false,
   className,
   children,
+  render,
   ...props
-}: MenuPrimitive.Trigger.Props) {
+}: MenuPrimitive.Trigger.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
   return (
     <MenuPrimitive.Trigger
       className={className}
       data-slot="menu-trigger"
+      render={resolvedRender}
       {...props}
     >
-      {children}
+      {asChild ? undefined : children}
     </MenuPrimitive.Trigger>
   );
 }

apps/web/src/components/ui/popover.tsx

···
 "use client";
 
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
 
 import { cn } from "@/lib/cn";
 
···
 const Popover = PopoverPrimitive.Root;
 
 function PopoverTrigger({
+  asChild = false,
   className,
   children,
+  render,
   ...props
-}: PopoverPrimitive.Trigger.Props) {
+}: PopoverPrimitive.Trigger.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
   return (
     <PopoverPrimitive.Trigger
       className={className}
       data-slot="popover-trigger"
+      render={resolvedRender}
       {...props}
     >
-      {children}
+      {asChild ? undefined : children}
     </PopoverPrimitive.Trigger>
   );
 }
···
         >
           <PopoverPrimitive.Viewport
             className={cn(
-              "relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",
+              "relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-0.5 [--viewport-inline-padding:--spacing(1)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",
               tooltipStyle
-                ? "py-1 [--viewport-inline-padding:--spacing(2)]"
+                ? "py-0.5 [--viewport-inline-padding:--spacing(1)]"
                 : "not-data-transitioning:overflow-y-auto",
             )}
             data-slot="popover-viewport"

apps/web/src/components/ui/preview-card.tsx

···
 "use client";
 
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import * as React from "react";
 
 import { cn } from "@/lib/cn";
 
-const PreviewCard = PreviewCardPrimitive.Root;
+function PreviewCard({
+  closeDelay,
+  openDelay,
+  ...props
+}: PreviewCardPrimitive.Root.Props & {
+  openDelay?: number;
+  closeDelay?: number;
+}) {
+  void openDelay;
+  void closeDelay;
+  return <PreviewCardPrimitive.Root {...props} />;
+}
+
+function PreviewCardTrigger({
+  asChild = false,
+  children,
+  render,
+  ...props
+}: PreviewCardPrimitive.Trigger.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
 
-function PreviewCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
   return (
-    <PreviewCardPrimitive.Trigger data-slot="preview-card-trigger" {...props} />
+    <PreviewCardPrimitive.Trigger
+      data-slot="preview-card-trigger"
+      render={resolvedRender}
+      {...props}
+    >
+      {asChild ? undefined : children}
+    </PreviewCardPrimitive.Trigger>
   );
 }
 
···
   className,
   children,
   align = "center",
+  side = "top",
   sideOffset = 4,
   anchor,
   ...props
 }: PreviewCardPrimitive.Popup.Props & {
   align?: PreviewCardPrimitive.Positioner.Props["align"];
+  side?: PreviewCardPrimitive.Positioner.Props["side"];
   sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
   anchor?: PreviewCardPrimitive.Positioner.Props["anchor"];
 }) {
···
         anchor={anchor}
         className="z-50"
         data-slot="preview-card-positioner"
+        side={side}
         sideOffset={sideOffset}
       >
         <PreviewCardPrimitive.Popup

apps/web/src/components/ui/tooltip.tsx

···
 "use client";
 
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import * as React from "react";
 
 import { cn } from "@/lib/cn";
 
···
 
 const Tooltip = TooltipPrimitive.Root;
 
-function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+function TooltipTrigger({
+  asChild = false,
+  children,
+  render,
+  ...props
+}: TooltipPrimitive.Trigger.Props & { asChild?: boolean }) {
+  const resolvedRender =
+    asChild && React.isValidElement(children) ? children : render;
+
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      render={resolvedRender}
+      {...props}
+    >
+      {asChild ? undefined : children}
+    </TooltipPrimitive.Trigger>
+  );
 }
 
 function TooltipPopup({