From 05d648d0b71603ad5cbc950688749f8efd2606fe Mon Sep 17 00:00:00 2001 From: p-sw Date: Wed, 29 May 2024 23:13:13 +0900 Subject: [PATCH] feat: add hover effect in checkbox --- packages/react/components/Checkbox.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/components/Checkbox.tsx b/packages/react/components/Checkbox.tsx index 63c2b0e..d93490e 100644 --- a/packages/react/components/Checkbox.tsx +++ b/packages/react/components/Checkbox.tsx @@ -4,19 +4,23 @@ import { VariantProps, vcn } from "../shared"; const checkboxColors = { background: { default: "bg-neutral-200 dark:bg-neutral-700", + hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600", checked: "bg-neutral-300 dark:bg-neutral-400", + checkedHover: "hover:bg-neutral-400 dark:hover:bg-neutral-300", disabled: 'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800', + disabledHover: + "has-[input[type='checkbox']:disabled]:hover:bg-neutral-100 dark:has-[input[type='checkbox']:disabled]:hover:bg-neutral-800", }, checkmark: "text-black dark:text-white", }; const [checkboxVariant, resolveCheckboxVariantProps] = vcn({ - base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`, + base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`, variants: { checked: { - true: `${checkboxColors.background.checked}`, - false: `${checkboxColors.background.default}`, + true: `${checkboxColors.background.checked} ${checkboxColors.background.checkedHover}`, + false: ``, }, size: { base: "size-[1em] p-0 [&>svg]:size-[1em]",