From b4705c515b10fbb030d97afb6d8af5599619fad8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20Poduszl=C3=B3?=
 <14854048+kripod@users.noreply.github.com>
Date: Sun, 21 Jul 2024 07:27:55 +0200
Subject: [PATCH] refactor(controlClassName): modularize

---
 src/utils/controlClassName.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/utils/controlClassName.ts b/src/utils/controlClassName.ts
index 17928f3..b5797f8 100644
--- a/src/utils/controlClassName.ts
+++ b/src/utils/controlClassName.ts
@@ -5,17 +5,29 @@ interface ControlProps {
   shape: "rectangle" | "pill" | "square" | "circle";
 }
 
+export function controlClassName(props: ControlProps) {
+  return clsx(
+    "transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-accent-600 disabled:pointer-events-none disabled:opacity-35",
+    controlSizeClassName(props),
+    controlShapeClassName(props),
+  );
+}
+
 function isEquilateral(shape: ControlProps["shape"]) {
   return shape === "square" || shape === "circle";
 }
 
-export function controlClassName({ size, shape }: ControlProps) {
+export function controlSizeClassName({ size, shape }: ControlProps) {
   return clsx(
-    "pointer-events-auto transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-accent-600 disabled:pointer-events-none disabled:opacity-35",
     size === "sm" && clsx("h-8 text-base/none", isEquilateral(shape) && "w-8"),
     size === "md" &&
       clsx("h-10 text-base/none", isEquilateral(shape) && "w-10"),
     size === "lg" && clsx("h-14 text-xl/none", isEquilateral(shape) && "w-14"),
+  );
+}
+
+export function controlShapeClassName({ size, shape }: ControlProps) {
+  return clsx(
     (shape === "rectangle" || shape === "square") &&
       clsx(
         size === "sm" && "rounded-md",