Enhance components Checkbox

Author: hyu-dev

packages/components/src/components/Checkbox/index.tsx

@@ -1,5 +1,7 @@
+'use client'
+
 import { Box, css, Flex, Input, Text } from '@devup-ui/react'
-import { ComponentProps, useId } from 'react'
+import { ComponentProps, useId, useState } from 'react'
 
 import { CheckIcon } from './CheckIcon'
 
@@ -20,22 +22,47 @@ export function Checkbox({
   children,
   disabled,
   checked,
+  defaultChecked = false,
   colors,
   onChange,
   ...props
 }: CheckboxProps) {
   const generateId = useId()
+  const [innerChecked, setInnerChecked] = useState(defaultChecked)
+  const isChecked = checked ?? innerChecked
+
+  const handleChange = (value: boolean) => {
+    setInnerChecked(value)
+    onChange?.(value)
+  }
+
   return (
-    <Flex alignItems="center" gap="8px">
-      <Box h="18px" pos="relative" w="fit-content">
+    <Flex
+      className={css({
+        alignItems: 'center',
+        gap: '8px',
+      })}
+    >
+      <label
+        className={css({
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '16px',
+          height: '16px',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        })}
+        htmlFor={generateId}
+      >
         <Input
           _active={
             !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))',
             }
           }
           _checked={{
-            bg: 'light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
+            bg: 'var(--primary, light-dark(#6159D4, #6670F9))',
             border: 'none',
             _hover: !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))',
@@ -50,25 +77,32 @@ export function Checkbox({
           _hover={
             !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))',
-              border:
-                '1px solid light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
+              border: '1px solid var(--primary, light-dark(#6159D4, #6670F9))',
             }
           }
-          accentColor="light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"
+          accentColor="var(--primary, light-dark(#6159D4, #6670F9))"
           appearance="none"
-          bg="light-dark(#FFF, var(--inputBg, #2E2E2E))"
-          border="1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))"
+          bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
+          border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
           borderRadius="2px"
-          boxSize="16px"
           checked={checked}
+          className={css({
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            opacity: 1,
+            zIndex: 0,
+            pointerEvents: 'none',
+          })}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           disabled={disabled}
+          display="block"
           id={generateId}
           m="0"
           onChange={
-            disabled || !onChange
-              ? undefined
-              : (e) => onChange(e.target.checked)
+            disabled ? undefined : (e) => handleChange(e.target.checked)
           }
           styleOrder={1}
           styleVars={{
@@ -81,24 +115,25 @@ export function Checkbox({
           type="checkbox"
           {...props}
         />
-        {checked && (
+        {isChecked && (
           <Box
             as={CheckIcon}
             props={{
               color: disabled
                 ? 'light-dark(#D6D7DE, #373737)'
                 : 'var(--checkIcon, #FFF)',
               className: css({
-                left: '50%',
                 pointerEvents: 'none',
-                pos: 'absolute',
-                top: '60%',
-                transform: 'translate(-50%, -50%)',
+                opacity: 1,
+                zIndex: 1,
               }),
             }}
+            styleVars={{
+              checkIcon: colors?.checkIcon,
+            }}
           />
         )}
-      </Box>
+      </label>
 
       <label
         className={css({
@@ -111,7 +146,7 @@ export function Checkbox({
             color={
               disabled
                 ? 'light-dark(#D6D7DE, #373737)'
-                : 'light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))'
+                : 'var(--text, light-dark(#2F2F2F, #EDEDED))'
             }
             fontSize="14px"
             userSelect="none"