@metamask/design-system-react
Version:
Design system react ui components
31 lines • 1.27 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { BadgeStatusSize } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.mjs";
import { CLASSMAP_BADGESTATUS_STATUS_CIRCLE, CLASSMAP_BADGESTATUS_SIZE } from "./BadgeStatus.constants.mjs";
export const BadgeStatus = forwardRef(({ status, size = BadgeStatusSize.Md, hasBorder = true, className, style, ...props }, ref) => {
const mergedClassName = twMerge(
// Base styles
'inline-flex rounded-full',
// hasBorder style
hasBorder ? 'border-2 border-background-default' : '',
// Custom classes
className);
const mergedCircleClassName = twMerge(
// Base styles
'z-10 rounded-full border-2',
// Size styles
CLASSMAP_BADGESTATUS_SIZE[size],
// Circle with semantics style
CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]);
return (React.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
React.createElement("div", { className: mergedCircleClassName })));
});
BadgeStatus.displayName = 'BadgeStatus';
//# sourceMappingURL=BadgeStatus.mjs.map