@metamask/design-system-react
Version:
Design system react ui components
22 lines • 1.33 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { BadgeCountSize } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.mjs";
import { Text, TextColor, FontWeight } from "../Text/index.mjs";
import { MAP_BADGECOUNT_SIZE_TEXTVARIANT, TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER } from "./BadgeCount.constants.mjs";
export const BadgeCount = forwardRef(({ size = BadgeCountSize.Md, count, max = 99, textProps, className = '', style, ...props }, ref) => {
const mergedClassName = twMerge(
// Base styles
'inline-flex items-center justify-center self-start rounded-lg bg-error-default', TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], className);
return (React.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
React.createElement(Text, { variant: MAP_BADGECOUNT_SIZE_TEXTVARIANT[size], color: TextColor.ErrorInverse, fontWeight: FontWeight.Medium, ...textProps, className: `${textProps?.className || ''}`, asChild: true },
React.createElement("span", null, count > max ? `${max}+` : `${count}`))));
});
BadgeCount.displayName = 'BadgeCount';
//# sourceMappingURL=BadgeCount.mjs.map