p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add hover effect in checkbox

Browse Source
This commit is contained in:
p-sw 2024-05-29 23:13:13 +09:00
parent 9e4e53ee51
commit 05d648d0b7
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react/components/Checkbox.tsx
View File

@ -4,19 +4,23 @@ import { VariantProps, vcn } from "../shared";
const checkboxColors = { const checkboxColors = {
background: { background: {
default: "bg-neutral-200 dark:bg-neutral-700", 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", checked: "bg-neutral-300 dark:bg-neutral-400",
checkedHover: "hover:bg-neutral-400 dark:hover:bg-neutral-300",
disabled: disabled:
'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800', '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", checkmark: "text-black dark:text-white",
}; };
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({ 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: { variants: {
checked: { checked: {
true: `${checkboxColors.background.checked}`, true: `${checkboxColors.background.checked} ${checkboxColors.background.checkedHover}`,
false: `${checkboxColors.background.default}`, false: ``,
}, },
size: { size: {
base: "size-[1em] p-0 [&>svg]:size-[1em]", base: "size-[1em] p-0 [&>svg]:size-[1em]",