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

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

@ -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>
</>
);