@metamask/design-system-react
Version:
Design system react ui components
54 lines • 2.98 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef, useImperativeHandle } from "react";
const React = $importDefault($React);
import { twMerge } from "../../utils/tw-merge.mjs";
import { Icon, IconName, IconColor, IconSize } from "../Icon/index.mjs";
import { Text } from "../Text/index.mjs";
export const Checkbox = forwardRef(({ id, isSelected, isDisabled = false, isInvalid = false, label, labelProps, onChange, inputProps, checkboxContainerProps, checkedIconProps, className, style, ...props }, ref) => {
const handleChange = (event) => {
if (isDisabled) {
return;
}
onChange?.(event.target.checked);
};
const handleClick = () => {
if (isDisabled) {
return;
}
onChange?.(!isSelected);
};
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
handleClick();
}
};
useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);
const outerClassName = twMerge('inline-flex items-center', isDisabled && 'cursor-not-allowed opacity-50', className);
const baseBg = isSelected
? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'
: 'bg-default hover:bg-default-hover active:bg-default-pressed';
let baseBorder = 'border-default';
if (isSelected) {
baseBorder = 'border-primary-default';
}
else if (isInvalid) {
baseBorder = 'border-error-default';
}
const checkboxClasses = twMerge('relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95', baseBg, baseBorder, checkboxContainerProps?.className);
const iconClasses = twMerge('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
return (React.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
React.createElement("div", { className: "relative" },
React.createElement("input", { type: "checkbox", id: id, checked: isSelected, disabled: isDisabled, "aria-invalid": isInvalid, onChange: handleChange, onKeyDown: handleKeyDown, className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", ...inputProps }),
React.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
React.createElement(Icon, { name: IconName.Check, color: IconColor.PrimaryInverse, size: IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
label ? (React.createElement(Text, { asChild: true, ...labelProps, className: twMerge('ml-3', labelProps?.className) },
React.createElement("span", null, label))) : null));
});
Checkbox.displayName = 'Checkbox';
//# sourceMappingURL=Checkbox.mjs.map