refactor: group some utility classes

components/sidebar/tool-group.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import * as Accordion from "@radix-ui/react-accordion";
 
 import { ToolGroup as IToolGroup } from "@/config/tools";
+import { cn } from "@/lib/style";
 import { icons } from "@/components/icons";
 
 import { ToolLink } from "./tool-link";
@@ -38,14 +39,24 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
           />
           <Accordion.Trigger
             ref={triggerRef}
-            className="absolute right-0 flex h-10 w-10 items-center justify-center rounded transition-all duration-0 hover:bg-accent [&[data-state=open]>svg]:rotate-180"
+            className={cn(
+              "absolute right-0 flex h-10 w-10 items-center justify-center rounded transition-all duration-0",
+              "hover:bg-accent",
+              "[&[data-state=open]>svg]:rotate-180"
+            )}
             aria-label="toggle open/close state of the tool group"
           >
             <icons.ChevronDown className="h-4 w-4 transition-transform duration-200" />
           </Accordion.Trigger>
         </div>
       </Accordion.Header>
-      <Accordion.AccordionContent className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+      <Accordion.AccordionContent
+        className={cn(
+          "overflow-hidden transition-all",
+          "data-[state=open]:animate-accordion-down",
+          "data-[state=closed]:animate-accordion-up"
+        )}
+      >
         <ul>
           {Object.values(tools).map(tool => (
             <li className="mt-1" key={tool.href}>

components/sidebar/tool-link.tsx

@@ -16,8 +16,9 @@ function RawToolLink({ Icon, shortTitle: title, href, onClick, className, highli
   return (
     <Link
       className={cn(
-        "flex h-10 items-center gap-3 rounded hover:bg-accent",
+        "flex h-10 items-center gap-3 rounded",
         highlight === "both" && "bg-accent",
+        "hover:bg-accent",
         className
       )}
       {...{ href, onClick }}

components/ui/input.tsx

@@ -9,7 +9,11 @@ const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ..
   <input
     {...{ ref }}
     className={cn(
-      "border-b-1 flex h-9 w-full 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",
+      "border-b-1 flex h-9 w-full 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"

components/ui/label.tsx

@@ -12,7 +12,8 @@ export const Label = React.forwardRef<
   <LabelPrimitive.Root
     {...{ ref }}
     className={cn(
-      "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      "leading-none",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className
     )}
     {...props}

components/ui/select.tsx

@@ -20,7 +20,10 @@ export const SelectTrigger = 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 placeholder:text-muted-foreground hover:bg-select-hover disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-9 w-full 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",
       className
     )}
     {...props}
@@ -80,7 +83,9 @@ export const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     {...{ ref }}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none hover:bg-select-item-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none",
+      "hover:bg-select-item-hover",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}

components/ui/switch.tsx

@@ -12,14 +12,24 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
     <SwitchPrimitives.Root
       {...{ ref }}
       className={cn(
-        "group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch hover:bg-switch-hover disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-switch data-[state=checked]:border-transparent data-[state=checked]:bg-indicator data-[state=checked]:hover:bg-indicator-hover data-[state=checked]:disabled:hover:bg-indicator",
+        "group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch",
+        "hover:bg-switch-hover",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "hover:disabled:bg-switch",
+        "data-[state=checked]:border-transparent data-[state=checked]:bg-indicator",
+        "data-[state=checked]:hover:bg-indicator-hover",
+        "data-[state=checked]:disabled:hover:bg-indicator",
         className
       )}
       {...props}
     >
       <SwitchPrimitives.Thumb
         className={cn(
-          "pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform group-hover:h-4 group-hover:w-4 group-disabled:h-3.5 group-disabled:w-3.5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5 data-[state=checked]:bg-background"
+          "pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform",
+          "group-hover:h-4 group-hover:w-4",
+          "group-disabled:h-3.5 group-disabled:w-3.5",
+          "data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-background",
+          "data-[state=unchecked]:translate-x-0.5"
         )}
       />
     </SwitchPrimitives.Root>

components/ui/textarea.tsx

@@ -10,7 +10,11 @@ export const RawTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     <textarea
       {...{ ref }}
       className={cn(
-        "border-b-1 flex w-full resize-none rounded border border-b-muted-foreground bg-textarea px-3 py-2 font-mono outline-none placeholder:text-muted-foreground hover:bg-textarea-hover focus:border-b-2 focus:border-b-indicator focus:bg-textarea-focus focus:pb-[7px] disabled:cursor-not-allowed disabled:opacity-50",
+        "border-b-1 flex w-full resize-none rounded border border-b-muted-foreground bg-textarea px-3 py-2 font-mono outline-none",
+        "placeholder:text-muted-foreground",
+        "hover:bg-textarea-hover",
+        "focus:border-b-2 focus:border-b-indicator focus:bg-textarea-focus focus:pb-[7px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       spellCheck="false"

components/ui/tooltip.tsx

@@ -16,7 +16,11 @@ export const TooltipContent = React.forwardRef<
   <TooltipPrimitive.Content
     {...{ ref, sideOffset }}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-tooltip px-3 py-1.5 text-tooltip-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      "z-50 overflow-hidden rounded-md border bg-tooltip px-3 py-1.5 text-tooltip-foreground shadow-md animate-in fade-in-50",
+      "data-[side=bottom]:slide-in-from-top-1",
+      "data-[side=left]:slide-in-from-right-1",
+      "data-[side=right]:slide-in-from-left-1",
+      "data-[side=top]:slide-in-from-bottom-1",
       className
     )}
     {...props}