refactor: drop tailwind-merge

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",