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

feat: add disabled checked style in checkbox

Browse Source
This commit is contained in:
p-sw 2024-05-30 00:14:27 +09:00
parent 347b475c99
commit 09f915bead
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,12 +13,17 @@ const checkboxColors = {
'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: disabledHover:
"has-[input[type='checkbox']:disabled]:hover:bg-neutral-100 dark:has-[input[type='checkbox']:disabled]:hover:bg-neutral-800", "has-[input[type='checkbox']:disabled]:hover:bg-neutral-100 dark:has-[input[type='checkbox']:disabled]:hover:bg-neutral-800",
disabledChecked:
"has-[input[type='checkbox']:disabled:checked]:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:bg-neutral-700",
disabledCheckedHover:
"has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700",
}, },
checkmark: "text-black dark:text-white", checkmark:
"text-black dark:text-white has-[input[type=checkbox]:disabled]:text-neutral-400 dark:has-[input[type=checkbox]:disabled]:text-neutral-500",
}; };
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({ const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} 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} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
variants: { variants: {
size: { size: {
base: "size-[1em] p-0 [&>svg]:size-[1em]", base: "size-[1em] p-0 [&>svg]:size-[1em]",

9
packages/react/stories/Checkbox.stories.tsx
View File

@ -58,6 +58,15 @@ export const Disabled = () => {
); );
}; };
export const DisabledChecked = () => {
return (
<Label direction="horizontal">
<Checkbox disabled checked />
<span>Disabled checkbox</span>
</Label>
);
};
export const BaseSize = () => { export const BaseSize = () => {
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">