@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines • 6.17 kB

Source Map (JSON)

{"version":3,"file":"Badge.cjs","names":["createVarsResolver","getSize","getRadius","getThemeColor","polymorphicFactory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineGradient,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Badge.module.css';\n\nexport type BadgeStylesNames = 'root' | 'section' | 'label';\nexport type BadgeVariant =\n | 'filled'\n | 'light'\n | 'outline'\n | 'dot'\n | 'transparent'\n | 'white'\n | 'default'\n | 'gradient';\n\nexport type BadgeCssVariables = {\n root:\n | '--badge-height'\n | '--badge-padding-x'\n | '--badge-fz'\n | '--badge-radius'\n | '--badge-bg'\n | '--badge-color'\n | '--badge-bd'\n | '--badge-dot-color';\n};\n\nexport interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {\n /** Controls `font-size`, `height` and horizontal `padding` @default 'md' */\n size?: MantineSize | (string & {});\n\n /** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */\n circle?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n radius?: MantineRadius;\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Gradient configuration used when `variant=\\\"gradient\\\"` @default theme.defaultGradient */\n gradient?: MantineGradient;\n\n /** Content displayed on the left side of the badge label */\n leftSection?: React.ReactNode;\n\n /** Content displayed on the right side of the badge label */\n rightSection?: React.ReactNode;\n\n /** Determines whether Badge should take 100% of its parent width @default false */\n fullWidth?: boolean;\n\n /** Main badge content */\n children?: React.ReactNode;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type BadgeFactory = PolymorphicFactory<{\n props: BadgeProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: BadgeStylesNames;\n vars: BadgeCssVariables;\n variant: BadgeVariant;\n}>;\n\nconst varsResolver = createVarsResolver<BadgeFactory>(\n (theme, { radius, color, gradient, variant, size, autoContrast, circle }) => {\n const colors = theme.variantColorResolver({\n color: color || theme.primaryColor,\n theme,\n gradient,\n variant: variant || 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--badge-height': getSize(size, 'badge-height'),\n '--badge-padding-x': getSize(size, 'badge-padding-x'),\n '--badge-fz': getSize(size, 'badge-fz'),\n '--badge-radius': circle || radius === undefined ? undefined : getRadius(radius),\n '--badge-bg': color || variant ? colors.background : undefined,\n '--badge-color': color || variant ? colors.color : undefined,\n '--badge-bd': color || variant ? colors.border : undefined,\n '--badge-dot-color': variant === 'dot' ? getThemeColor(color, theme) : undefined,\n },\n };\n }\n);\n\nexport const Badge = polymorphicFactory<BadgeFactory>((_props) => {\n const props = useProps('Badge', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n radius,\n color,\n gradient,\n leftSection,\n rightSection,\n children,\n variant,\n fullWidth,\n autoContrast,\n circle,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<BadgeFactory>({\n name: 'Badge',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box\n variant={variant}\n mod={[\n {\n block: fullWidth,\n circle,\n 'with-right-section': !!rightSection,\n 'with-left-section': !!leftSection,\n },\n mod,\n ]}\n {...getStyles('root', { variant })}\n {...others}\n >\n {leftSection && (\n \n {leftSection}\n \n )}\n {children}\n {rightSection && (\n \n {rightSection}\n \n )}\n </Box>\n );\n});\n\nBadge.classes = classes;\nBadge.varsResolver = varsResolver;\nBadge.displayName = '@mantine/core/Badge';\n"],"mappings":";;;;;;;;;;;;AAmFA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,MAAM,cAAc,aAAa;CAC3E,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,kBAAkBC,iBAAAA,QAAQ,MAAM,eAAe;EAC/C,qBAAqBA,iBAAAA,QAAQ,MAAM,kBAAkB;EACrD,cAAcA,iBAAAA,QAAQ,MAAM,WAAW;EACvC,kBAAkB,UAAU,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EAChF,cAAc,SAAS,UAAU,OAAO,aAAa,KAAA;EACrD,iBAAiB,SAAS,UAAU,OAAO,QAAQ,KAAA;EACnD,cAAc,SAAS,UAAU,OAAO,SAAS,KAAA;EACjD,qBAAqB,YAAY,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;EACxE,EACF;EAEJ;AAED,MAAa,QAAQC,4BAAAA,oBAAkC,WAAW;CAChE,MAAM,QAAQC,kBAAAA,SAAS,SAAS,MAAM,OAAO;CAC7C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,OACA,UACA,aACA,cACA,UACA,SACA,WACA,cACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACW;EACT,KAAK,CACH;GACE,OAAO;GACP;GACA,sBAAsB,CAAC,CAAC;GACxB,qBAAqB,CAAC,CAAC;GACxB,EACD,IACD;EACD,GAAI,UAAU,QAAQ,EAAE,SAAS,CAAC;EAClC,GAAI;YAZN;GAcG,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,UAAU;IAAE,iBAAc;cAC3C;IACI,CAAA;GAET,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,QAAQ;IAAG;IAAgB,CAAA;GAC9C,gBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,UAAU;IAAE,iBAAc;cAC3C;IACI,CAAA;GAEL;;EAER;AAEF,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}