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

fix: remove unnecessary layer in checkbox

Browse Source
This commit is contained in:
p-sw 2024-05-29 22:59:41 +09:00
parent b2d417c49c
commit 01817388c2
1 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,13 @@ const checkboxColors = {
default: "bg-neutral-200 dark:bg-neutral-700", default: "bg-neutral-200 dark:bg-neutral-700",
checked: "bg-neutral-300 dark:bg-neutral-400", checked: "bg-neutral-300 dark:bg-neutral-400",
disabled: 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", checkmark: "text-black dark:text-white",
}; };
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({ 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: { variants: {
checked: { checked: {
true: `${checkboxColors.background.checked}`, true: `${checkboxColors.background.checked}`,
@ -47,7 +47,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
return ( return (
<> <>
<label className="size-6"> <label className={checkboxVariant({ ...variantProps, checked })}>
<input <input
{...otherPropsExtracted} {...otherPropsExtracted}
defaultChecked={defaultChecked} defaultChecked={defaultChecked}
@ -73,7 +73,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
} }
}} }}
/> />
<div className={checkboxVariant({ ...variantProps, checked })}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="1em" width="1em"
@ -86,7 +85,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
></path> ></path>
</svg> </svg>
</div>
</label> </label>
</> </>
); );