refactor: drop tailwind-merge

components/buttons/base.tsx

@@ -9,7 +9,7 @@ export type BaseProps = ButtonProps & {
 
 export function Base({ icon, iconOnly, labelText, ...props }: BaseProps) {
   const button = (
-    <Button className="border" {...props}>
+    <Button className="inline-flex items-center border" {...props}>
       {icon}
       {!iconOnly && <span className="ml-1">{labelText}</span>}
     </Button>

components/sidebar/search-bar.tsx

@@ -44,18 +44,23 @@ export function SearchBar() {
     <div className="relative flex items-center">
       <Input
         ref={inputRef}
-        className="w-full pr-16 font-sans"
+        className="w-full pr-16"
         value={text}
         onChange={changeText}
         onKeyDown={searchIfEnter}
         placeholder="Type to search for tools…"
       />
       <div className="absolute right-1 flex gap-1">
-        <Button className={cn("h-6 p-0", !text && "hidden")} variant="ghost" onClick={clearText}>
+        <Button
+          className={cn(!text && "hidden")}
+          variant="ghost"
+          size="shorter"
+          onClick={clearText}
+        >
           <icons.X className="p-1 text-muted-foreground" />
           <span className="sr-only">Clear search text</span>
         </Button>
-        <Button className="h-6 p-0" variant="ghost" onClick={search} aria-label="search">
+        <Button variant="ghost" size="shorter" onClick={search} aria-label="search">
           <icons.Search className="-scale-x-100 p-1 text-muted-foreground" />
           <span className="sr-only">Search tools</span>
         </Button>

components/theme-toggle.tsx

@@ -10,8 +10,9 @@ export function ThemeToggle() {
 
   return (
     <Button
-      className="h-10 w-10 p-0"
+      className="inline-flex aspect-square items-center justify-center"
       variant="ghost"
+      size="taller"
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
     >
       <icons.Sun className="h-7 w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/style";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-50",
+  "transition-colors disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -14,6 +14,8 @@ export const buttonVariants = cva(
       },
       size: {
         default: "h-9 rounded-md px-3 py-2",
+        taller: "h-10 rounded-md",
+        shorter: "h-6 rounded-md",
       },
     },
     defaultVariants: {

components/ui/input.tsx

@@ -3,23 +3,28 @@ import equal from "react-fast-compare";
 
 import { cn } from "@/lib/style";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  fontMono?: true;
+};
 
-const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  <input
-    {...{ ref }}
-    className={cn(
-      "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none",
-      "placeholder:text-muted-foreground",
-      "hover:bg-input-hover",
-      "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    )}
-    spellCheck="false"
-    {...props}
-  />
-));
+const RawInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, fontMono, ...props }, ref) => (
+    <input
+      {...{ ref }}
+      className={cn(
+        "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 outline-none",
+        "placeholder:text-muted-foreground",
+        "hover:bg-input-hover",
+        "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        fontMono && "font-mono",
+        className
+      )}
+      spellCheck="false"
+      {...props}
+    />
+  )
+);
 RawInput.displayName = "RawInput";
 
 export const Input = React.memo(RawInput, equal);

components/ui/select.tsx

@@ -18,7 +18,7 @@ export const Trigger = React.forwardRef<
   <SelectPrimitive.Trigger
     {...{ ref }}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
+      "flex h-9 items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
       "placeholder:text-muted-foreground",
       "hover:bg-select-hover",
       "disabled:cursor-not-allowed disabled:opacity-50",