@metamask/design-system-react-native/dist/components/BadgeCount/BadgeCount.mjs

Design System React Native

function $importDefault(module) {
    if (module?.__esModule) {
        return module.default;
    }
    return module;
}
import { useTailwind } from "@metamask/design-system-twrnc-preset";
import $React from "react";
const React = $importDefault($React);
import { View } from "react-native/index.js";
import { BadgeCountSize } from "../../types/index.mjs";
import { Text, TextColor, FontWeight } from "../Text/index.mjs";
import { MAP_BADGECOUNT_SIZE_TEXTVARIANT, TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER, MAP_BADGECOUNT_SIZE_LINEHEIGHT } from "./BadgeCount.constants.mjs";
export const BadgeCount = ({ size = BadgeCountSize.Md, count, max = 99, textProps, twClassName = '', style, ...props }) => {
    const tw = useTailwind();
    const twContainerClassNames = `
    bg-error-default
    rounded-lg
    items-center
    justify-center
    self-start
    ${TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size]}
    ${twClassName}`;
    return (<View style={[tw `${twContainerClassNames}`, style]} {...props}>
      <Text variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={TextColor.ErrorInverse} fontWeight={FontWeight.Medium} {...textProps} twClassName={`${MAP_BADGECOUNT_SIZE_LINEHEIGHT[size]} ${textProps?.twClassName || ''}`}>
        {count > max ? `${max}+` : `${count}`}
      </Text>
    </View>);
};
//# sourceMappingURL=BadgeCount.mjs.map