refactor: drop tailwind-merge

app/converters/number-base/page.tsx

@@ -90,16 +90,16 @@ export default function Page() {
       </PageSection>
       <div className="flex flex-col gap-3">
         <PageSection title="Decimal" control={decControl}>
-          <Input value={dec} onChange={onDecChange} />
+          <Input fontMono value={dec} onChange={onDecChange} />
         </PageSection>
         <PageSection title="Hexadecimal" control={hexControl}>
-          <Input value={hex} onChange={onHexChange} />
+          <Input fontMono value={hex} onChange={onHexChange} />
         </PageSection>
         <PageSection title="Octal" control={octControl}>
-          <Input value={oct} onChange={onOctChange} />
+          <Input fontMono value={oct} onChange={onOctChange} />
         </PageSection>
         <PageSection title="Binary" control={binControl}>
-          <Input value={bin} onChange={onBinChange} />
+          <Input fontMono value={bin} onChange={onBinChange} />
         </PageSection>
       </div>
     </PageRootSection>

app/generators/hash/page.tsx

@@ -75,25 +75,25 @@ export default function Page() {
       <div className="flex flex-col gap-3">
         <PageSection title="MD5">
           <div className="flex gap-2">
-            <Input className="flex-1" value={md5} readOnly />
+            <Input fontMono className="flex-1" value={md5} readOnly />
             <ControlMenu list={[md5CopyButton]} />
           </div>
         </PageSection>
         <PageSection title="SHA1">
           <div className="flex gap-2">
-            <Input className="flex-1" value={sha1} readOnly />
+            <Input fontMono className="flex-1" value={sha1} readOnly />
             <ControlMenu list={[sha1CopyButton]} />
           </div>
         </PageSection>
         <PageSection title="SHA256">
           <div className="flex gap-2">
-            <Input className="flex-1" value={sha256} readOnly />
+            <Input fontMono className="flex-1" value={sha256} readOnly />
             <ControlMenu list={[sha256CopyButton]} />
           </div>
         </PageSection>
         <PageSection title="SHA512">
           <div className="flex gap-2">
-            <Input className="flex-1" value={sha512} readOnly />
+            <Input fontMono className="flex-1" value={sha512} readOnly />
             <ControlMenu list={[sha512CopyButton]} />
           </div>
         </PageSection>

app/generators/uuid/page.tsx

@@ -132,12 +132,7 @@ export default function Page() {
             Generate UUID(s)
           </Button>
           <span>×</span>
-          <Input
+          <Input className="w-24" type="number" value={generates} onChange={onGeneratesChange} />
-            className="w-24 font-sans"
-            type="number"
-            value={generates}
-            onChange={onGeneratesChange}
-          />
         </div>
       </PageSection>
       <PageSection className="-mt-3" title="UUID(s)" control={uuidsControl}>

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) => (
+const RawInput = React.forwardRef<HTMLInputElement, InputProps>(
-  <input
+  ({ className, fontMono, ...props }, ref) => (
-    {...{ ref }}
+    <input
-    className={cn(
+      {...{ ref }}
-      "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none",
+      className={cn(
-      "placeholder:text-muted-foreground",
+        "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 outline-none",
-      "hover:bg-input-hover",
+        "placeholder:text-muted-foreground",
-      "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
+        "hover:bg-input-hover",
-      "disabled:cursor-not-allowed disabled:opacity-50",
+        "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
-      className
+        "disabled:cursor-not-allowed disabled:opacity-50",
-    )}
+        fontMono && "font-mono",
-    spellCheck="false"
+        className
-    {...props}
+      )}
-  />
+      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",

lib/style.ts

@@ -1,4 +1,3 @@
-import { clsx, type ClassValue } from "clsx";
+import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
 
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+export const cn = clsx;

package.json

@@ -51,7 +51,6 @@
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.2",
     "sharp": "^0.32.1",
-    "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
     "uuid": "^9.0.0"
   },

pnpm-lock.yaml

@@ -79,9 +79,6 @@ dependencies:
   sharp:
     specifier: ^0.32.1
     version: 0.32.1
-  tailwind-merge:
-    specifier: ^1.12.0
-    version: 1.12.0
   tailwindcss-animate:
     specifier: ^1.0.5
     version: 1.0.5(tailwindcss@3.3.2)
@@ -4968,10 +4965,6 @@ packages:
       tslib: 2.6.1
     dev: true
 
-  /tailwind-merge@1.12.0:
-    resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==}
-    dev: false
-
   /tailwindcss-animate@1.0.5(tailwindcss@3.3.2):
     resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==}
     peerDependencies: