67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import type { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
|
|
import { Checkbox as AriaCheckbox, composeRenderProps } from 'react-aria-components';
|
|
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
const checkbox = tv({
|
|
base: 'inline-flex items-center gap-2 text-sm font-medium leading-7',
|
|
variants: {
|
|
isDisabled: {
|
|
true: 'text-dabeeo-gray-be',
|
|
},
|
|
},
|
|
});
|
|
|
|
const box = tv({
|
|
base: 'w-4 h-4 box-border shrink-0 flex items-center justify-center text-white border border-dabeeo-gray-be transition',
|
|
variants: {
|
|
isSelected: {
|
|
true: 'bg-primary border-primary',
|
|
},
|
|
isDisabled: {
|
|
true: 'text-dabeeo-gray-99 bg-dabeeo-gray-eb border-dabeeo-gray-be cursor-not-allowed',
|
|
},
|
|
isFocusVisible: {
|
|
true: 'ring-2 ring-offset-2 ring-primary',
|
|
},
|
|
},
|
|
compoundVariants: [],
|
|
});
|
|
|
|
export const Checkbox = (props: AriaCheckboxProps) => {
|
|
const { className, children, ...restProps } = props;
|
|
return (
|
|
<AriaCheckbox
|
|
className={composeRenderProps(className, (className, renderProps) => checkbox({ ...renderProps, className }))}
|
|
{...restProps}
|
|
>
|
|
{composeRenderProps(children, (children, { isSelected, isIndeterminate, ...renderProps }) => (
|
|
<>
|
|
<div className={box({ isSelected: isSelected || isIndeterminate, ...renderProps })}>
|
|
{isIndeterminate ? (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M5 12h14" />
|
|
</svg>
|
|
) : isSelected ? (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 7.00893L7.85714 10.625L13 5" stroke="currentColor" strokeWidth="2" />
|
|
</svg>
|
|
) : null}
|
|
</div>
|
|
{children}
|
|
</>
|
|
))}
|
|
</AriaCheckbox>
|
|
);
|
|
};
|