@metamask/design-system-react
Version:
Design system react ui components
73 lines • 4.11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Checkbox = void 0;
const react_1 = __importStar(require("react"));
const tw_merge_1 = require("../../utils/tw-merge.cjs");
const Icon_1 = require("../Icon/index.cjs");
const Text_1 = require("../Text/index.cjs");
exports.Checkbox = (0, react_1.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();
}
};
(0, react_1.useImperativeHandle)(ref, () => ({ toggle: handleClick }), [handleClick]);
const outerClassName = (0, tw_merge_1.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 = (0, tw_merge_1.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 = (0, tw_merge_1.twMerge)('pointer-events-none transition-opacity', isSelected ? 'opacity-100' : 'opacity-0', checkedIconProps?.className);
return (react_1.default.createElement("label", { htmlFor: id, className: outerClassName, style: style, ...props },
react_1.default.createElement("div", { className: "relative" },
react_1.default.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_1.default.createElement("div", { className: checkboxClasses, ...checkboxContainerProps },
react_1.default.createElement(Icon_1.Icon, { name: Icon_1.IconName.Check, color: Icon_1.IconColor.PrimaryInverse, size: Icon_1.IconSize.Sm, ...checkedIconProps, className: iconClasses }))),
label ? (react_1.default.createElement(Text_1.Text, { asChild: true, ...labelProps, className: (0, tw_merge_1.twMerge)('ml-3', labelProps?.className) },
react_1.default.createElement("span", null, label))) : null));
});
exports.Checkbox.displayName = 'Checkbox';
//# sourceMappingURL=Checkbox.cjs.map