@metamask/design-system-react
Version:
Design system react ui components
1 lines • 2.18 kB
Source Map (JSON)
{"version":3,"file":"BadgeStatus.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA8C;AAC9C,uDAA+C;AAE/C,uEAGiC;AAGpB,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EACE,MAAM,EACN,IAAI,GAAG,uBAAe,CAAC,EAAE,EACzB,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,0BAA0B;IAC1B,kBAAkB;IAClB,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;IACrD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,MAAM,qBAAqB,GAAG,IAAA,kBAAO;IACnC,cAAc;IACd,4BAA4B;IAC5B,cAAc;IACd,iDAAyB,CAAC,IAAI,CAAC;IAC/B,8BAA8B;IAC9B,0DAAkC,CAAC,MAAM,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,uCAAK,SAAS,EAAE,qBAAqB,GAAI,CACrC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BadgeStatusSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n CLASSMAP_BADGESTATUS_STATUS_CIRCLE,\n CLASSMAP_BADGESTATUS_SIZE,\n} from './BadgeStatus.constants';\nimport type { BadgeStatusProps } from './BadgeStatus.types';\n\nexport const BadgeStatus = forwardRef<HTMLDivElement, BadgeStatusProps>(\n (\n {\n status,\n size = BadgeStatusSize.Md,\n hasBorder = true,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex rounded-full',\n // hasBorder style\n hasBorder ? 'border-2 border-background-default' : '',\n // Custom classes\n className,\n );\n\n const mergedCircleClassName = twMerge(\n // Base styles\n 'z-10 rounded-full border-2',\n // Size styles\n CLASSMAP_BADGESTATUS_SIZE[size],\n // Circle with semantics style\n CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status],\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <div className={mergedCircleClassName} />\n </div>\n );\n },\n);\n\nBadgeStatus.displayName = 'BadgeStatus';\n"]}