UNPKG

@metamask/design-system-react

Version:
1 lines 2.36 kB
{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,4CAAsD;AAEtD,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,2DAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,8BAAC,WAAI,IACH,OAAO,EAAE,sDAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,gBAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,iBAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,4CAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BadgeCountSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = forwardRef<HTMLDivElement, BadgeCountProps>(\n (\n {\n size = BadgeCountSize.Md,\n count,\n max = 99,\n textProps,\n className = '',\n style,\n ...props\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center self-start rounded-lg bg-error-default',\n TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Text\n variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n color={TextColor.ErrorInverse}\n fontWeight={FontWeight.Medium}\n {...textProps}\n className={`${textProps?.className || ''}`}\n asChild\n >\n <span>{count > max ? `${max}+` : `${count}`}</span>\n </Text>\n </div>\n );\n },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}