Adopt Base UI primitives for shared form controls

BunsDev · BunsDev · commit 1de80a2ef41c · 2026-03-28T00:22:11.000-05:00
- Replace custom button, dialog, and input wrappers with Base UI
- Add editor defaults for JSON and JSONC files
- Include PR review cockpit design notes
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,6 +4,11 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.oxc": "always"
   },
-  "oxc.unusedDisableDirectives": "warn",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
 }
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
@@ -1,5 +1,5 @@
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
 
 import { cn } from "~/lib/utils";
 
@@ -12,6 +12,8 @@ const buttonVariants = cva(
           "bg-linear-to-b from-primary to-[hsl(223_82%_62%)] text-primary-foreground shadow-[0_18px_45px_-20px_hsl(var(--primary)/0.85)] hover:brightness-110 hover:shadow-[0_22px_55px_-22px_hsl(var(--primary)/0.95)]",
         destructive:
           "bg-linear-to-b from-destructive to-[hsl(352_72%_52%)] text-destructive-foreground shadow-[0_18px_45px_-20px_hsl(var(--destructive)/0.7)] hover:brightness-105 hover:shadow-[0_22px_55px_-22px_hsl(var(--destructive)/0.8)]",
+        "destructive-outline":
+          "border border-destructive/35 bg-destructive/6 text-destructive shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] hover:border-destructive/45 hover:bg-destructive/10 hover:text-destructive",
         outline:
           "border border-border/80 bg-card/70 text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] hover:border-primary/30 hover:bg-accent/80 hover:text-foreground",
         secondary:
@@ -26,6 +28,7 @@ const buttonVariants = cva(
         lg: "h-10 rounded-xl px-6",
         icon: "size-9 rounded-xl",
         "icon-xs": "size-7 rounded-lg",
+        "icon-sm": "size-8 rounded-lg",
       },
     },
     defaultVariants: {
@@ -35,33 +38,19 @@ const buttonVariants = cva(
   },
 );
 
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? (React.Fragment as never) : "button";
+interface ButtonProps
+  extends useRender.ComponentProps<"button">, VariantProps<typeof buttonVariants> {}
 
-  if (asChild) {
-    const child = React.Children.only(props.children) as React.ReactElement;
-    return React.cloneElement(child, {
+function Button({ className, variant, size, render, ...props }: ButtonProps) {
+  return useRender({
+    defaultTagName: "button",
+    props: {
       ...props,
-      className: cn(buttonVariants({ variant, size, className }), child.props.className),
-    });
-  }
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+      className: cn(buttonVariants({ variant, size, className })),
+      "data-slot": "button",
+    },
+    render,
+  });
 }
 
 export { Button, buttonVariants };
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
@@ -1,124 +1,154 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
+const DialogCreateHandle = DialogPrimitive.createHandle;
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogPortal = DialogPrimitive.Portal;
 
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+function DialogClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+function DialogBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.12),transparent_38%),rgba(3,7,18,0.82)] backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="dialog-backdrop"
+      {...props}
+    />
+  );
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props) {
   return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
+    <DialogPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.12),transparent_38%),rgba(3,7,18,0.82)] backdrop-blur-sm",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",
         className,
       )}
+      data-slot="dialog-viewport"
       {...props}
     />
   );
 }
 
-function DialogContent({
+function DialogPopup({
   className,
   children,
   showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }) {
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+}) {
   return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        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-2xl border border-border/80 bg-card/94 p-6 text-card-foreground shadow-[0_40px_120px_-45px_hsl(220_80%_2%/0.98)] backdrop-blur-2xl duration-200 sm:max-w-lg",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close className="absolute top-4 right-4 rounded-lg p-1.5 text-muted-foreground/75 transition-colors hover:bg-accent/80 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-card">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
+    <DialogPortal>
+      <DialogBackdrop />
+      <DialogViewport>
+        <DialogPrimitive.Popup
+          className={cn(
+            "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border border-border/80 bg-card/94 text-card-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-[0_40px_120px_-45px_hsl(220_80%_2%/0.98)] outline-none backdrop-blur-2xl transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="dialog-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close className="absolute top-4 right-4 rounded-lg p-1.5 text-muted-foreground/75 transition-colors hover:bg-accent/80 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-card">
+              <XIcon className="size-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Popup>
+      </DialogViewport>
     </DialogPortal>
   );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
+      className={cn("flex flex-col gap-2 px-6 pt-6 text-center sm:text-left", className)}
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
   );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogPanel({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("px-6 pb-6", className)} data-slot="dialog-panel" {...props} />;
+}
+
+function DialogFooter({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) {
   return (
     <div
+      className={cn(
+        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end",
+        variant === "default" &&
+          "rounded-b-[calc(var(--radius-2xl)-1px)] border-t bg-muted/72 py-4",
+        variant === "bare" && "pb-6",
+        className,
+      )}
       data-slot="dialog-footer"
-      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
   );
 }
 
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
-      data-slot="dialog-title"
       className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      data-slot="dialog-title"
       {...props}
     />
   );
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
-      data-slot="dialog-description"
       className={cn("text-sm leading-6 text-muted-foreground", className)}
+      data-slot="dialog-description"
       {...props}
     />
   );
 }
 
 export {
+  DialogCreateHandle,
   Dialog,
+  DialogBackdrop,
+  DialogBackdrop as DialogOverlay,
   DialogClose,
-  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogOverlay,
+  DialogPanel,
+  DialogPopup,
+  DialogPopup as DialogContent,
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DialogViewport,
 };
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
@@ -1,20 +1,77 @@
-import * as React from "react";
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { mergeProps } from "@base-ui/react/merge-props";
+import type * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+type InputSize = "sm" | "default" | "lg" | number;
+
+type InputProps = Omit<React.ComponentProps<"input">, "size"> & {
+  nativeInput?: boolean;
+  size?: InputSize;
+  unstyled?: boolean;
+};
+
+function inputFieldClassName(size: InputSize) {
+  return cn(
+    "w-full min-w-0 rounded-[inherit] bg-transparent outline-none placeholder:text-muted-foreground/65",
+    size === "sm" && "h-8 px-[calc(--spacing(2.5)-1px)] text-sm",
+    size === "default" && "h-9 px-[calc(--spacing(3)-1px)] text-base sm:h-8 sm:text-sm",
+    size === "lg" && "h-10 px-[calc(--spacing(3)-1px)] text-base sm:h-9 sm:text-sm",
+    typeof size === "number" && "px-[calc(--spacing(3)-1px)]",
+  );
+}
+
+function Input({
+  className,
+  type,
+  size = "default",
+  nativeInput = false,
+  unstyled = false,
+  ...props
+}: InputProps) {
+  const inputProps = {
+    ...props,
+    size: typeof size === "number" ? size : undefined,
+    type,
+  };
+
+  if (nativeInput) {
+    return (
+      <input
+        className={cn(inputFieldClassName(size), className)}
+        data-size={typeof size === "string" ? size : undefined}
+        data-slot="input"
+        {...inputProps}
+      />
+    );
+  }
+
   return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "flex h-10 w-full min-w-0 rounded-xl border border-border/80 bg-card/75 px-3 py-2 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.03)] transition-all duration-200 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/65 hover:border-border disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:border-primary/50 focus-visible:bg-card focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        className,
-      )}
-      {...props}
-    />
+    <span
+      className={
+        cn(
+          !unstyled &&
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+          className,
+        ) || undefined
+      }
+      data-size={typeof size === "string" ? size : undefined}
+      data-slot="input-control"
+    >
+      <FieldPrimitive.Control
+        render={(defaultProps) => (
+          <input
+            className={inputFieldClassName(size)}
+            data-slot="input"
+            {...mergeProps<"input">(defaultProps, inputProps)}
+          />
+        )}
+      />
+    </span>
   );
 }
 
-export { Input };
+export { Input, type InputProps };
diff --git a/pr-review-cockpit-end-to-end-github-review-conflict-resolution-and-repo-level-workflows.md b/pr-review-cockpit-end-to-end-github-review-conflict-resolution-and-repo-level-workflows.md
