refactor(controlClassName): modularize

kripod · Jul 21, 2024 · b4705c5 · b4705c5
1 parent b435d06
commit b4705c5
Showing 1 changed file with 14 additions and 2 deletions.
diff --git 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",