From 01817388c29acd598fed19d75933e907dde08ef7 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Wed, 29 May 2024 22:59:41 +0900
Subject: [PATCH] fix: remove unnecessary layer in checkbox

---
 packages/react/components/Checkbox.tsx | 32 ++++++++++++--------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/react/components/Checkbox.tsx b/packages/react/components/Checkbox.tsx
index 0bd0bd8..d8c5430 100644
--- a/packages/react/components/Checkbox.tsx
+++ b/packages/react/components/Checkbox.tsx
@@ -6,13 +6,13 @@ const checkboxColors = {
     default: "bg-neutral-200 dark:bg-neutral-700",
     checked: "bg-neutral-300 dark:bg-neutral-400",
     disabled:
-      "peer-disabled/checkbox:bg-neutral-100 dark:peer-disabled/checkbox:bg-neutral-800",
+      'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800',
   },
   checkmark: "text-black dark:text-white",
 };
 
 const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
-  base: `inline-block rounded-md p-1 size-6 ${checkboxColors.checkmark} ${checkboxColors.background.disabled} peer-disabled/checkbox:cursor-not-allowed transition-colors duration-75 ease-in-out`,
+  base: `inline-block rounded-md p-1 size-6 ${checkboxColors.checkmark} ${checkboxColors.background.disabled} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
   variants: {
     checked: {
       true: `${checkboxColors.background.checked}`,
@@ -47,7 +47,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <>
-        <label className="size-6">
+        <label className={checkboxVariant({ ...variantProps, checked })}>
           <input
             {...otherPropsExtracted}
             defaultChecked={defaultChecked}
@@ -73,20 +73,18 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
               }
             }}
           />
-          <div className={checkboxVariant({ ...variantProps, checked })}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="1em"
-              height="1em"
-              viewBox="0 0 24 24"
-              className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
-            >
-              <path
-                fill="currentColor"
-                d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
-              ></path>
-            </svg>
-          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 24 24"
+            className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
+          >
+            <path
+              fill="currentColor"
+              d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
+            ></path>
+          </svg>
         </label>
       </>
     );