UNPKG

flowbite-react

Version:

Official React components built for Flowbite and Tailwind CSS

1 lines 3.74 kB
{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ComponentProps, type FC } from \"react\";\nimport { get } from \"../../helpers/get\";\nimport { resolveProps } from \"../../helpers/resolve-props\";\nimport { useResolveTheme } from \"../../helpers/resolve-theme\";\nimport { twMerge } from \"../../helpers/tailwind-merge\";\nimport { useThemeProvider } from \"../../theme/provider\";\nimport type {\n DynamicStringEnumKeysOf,\n FlowbiteBoolean,\n FlowbiteColors,\n FlowbiteSizes,\n ThemingProps,\n} from \"../../types\";\nimport { badgeTheme } from \"./theme\";\n\nexport interface BadgeTheme {\n root: BadgeRootTheme;\n icon: BadgeIconTheme;\n}\n\nexport interface BadgeRootTheme {\n base: string;\n color: FlowbiteColors;\n size: BadgeSizes;\n}\n\nexport interface BadgeIconTheme extends FlowbiteBoolean {\n size: BadgeSizes;\n}\n\nexport interface BadgeSizes extends Pick<FlowbiteSizes, \"xs\" | \"sm\"> {\n [key: string]: string;\n}\n\nexport interface BadgeProps extends Omit<ComponentProps<\"span\">, \"color\">, ThemingProps<BadgeTheme> {\n color?: DynamicStringEnumKeysOf<FlowbiteColors>;\n icon?: FC<ComponentProps<\"svg\">>;\n size?: DynamicStringEnumKeysOf<BadgeSizes>;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n const provider = useThemeProvider();\n const theme = useResolveTheme(\n [badgeTheme, provider.theme?.badge, props.theme],\n [get(provider.clearTheme, \"badge\"), props.clearTheme],\n [get(provider.applyTheme, \"badge\"), props.applyTheme],\n );\n\n const {\n children,\n color = \"info\",\n icon: Icon,\n size = \"xs\",\n className,\n ...restProps\n } = resolveProps(props, provider.props?.badge);\n\n return (\n <span\n ref={ref}\n className={twMerge(\n theme.root.base,\n theme.root.color[color],\n theme.root.size[size],\n theme.icon[Icon ? \"on\" : \"off\"],\n className,\n )}\n data-testid=\"flowbite-badge\"\n {...restProps}\n >\n {Icon && <Icon aria-hidden className={theme.icon.size[size]} data-testid=\"flowbite-badge-icon\" />}\n {children && <span>{children}</span>}\n </span>\n );\n});\n\nBadge.displayName = \"Badge\";\n"],"names":["forwardRef","provider","useThemeProvider","theme","useResolveTheme","badgeTheme","get","resolveProps","jsxs","twMerge","jsx"],"mappings":";;;;;;;;;;;AAUY,MAAC,KAAK,GAAGA,gBAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AAChD,EAAE,MAAMC,UAAQ,GAAGC,yBAAgB,EAAE;AACrC,EAAE,MAAMC,OAAK,GAAGC,4BAAe;AAC/B,IAAI,CAACC,gBAAU,EAAEJ,UAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;AACpD,IAAI,CAACK,OAAG,CAACL,UAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;AACzD,IAAI,CAACK,OAAG,CAACL,UAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU;AACxD,GAAG;AACH,EAAE,MAAM;AACR,IAAI,QAAQ;AACZ,IAAI,KAAK,GAAG,MAAM;AAClB,IAAI,IAAI,EAAE,IAAI;AACd,IAAI,IAAI,GAAG,IAAI;AACf,IAAI,SAAS;AACb,IAAI,GAAG;AACP,GAAG,GAAGM,yBAAY,CAAC,KAAK,EAAEN,UAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;AAChD,EAAE,uBAAuBO,eAAI;AAC7B,IAAI,MAAM;AACV,IAAI;AACJ,MAAM,GAAG;AACT,MAAM,SAAS,EAAEC,qBAAO;AACxB,QAAQN,OAAK,CAAC,IAAI,CAAC,IAAI;AACvB,QAAQA,OAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAC/B,QAAQA,OAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7B,QAAQA,OAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,QAAQ;AACR,OAAO;AACP,MAAM,aAAa,EAAE,gBAAgB;AACrC,MAAM,GAAG,SAAS;AAClB,MAAM,QAAQ,EAAE;AAChB,QAAQ,IAAI,oBAAoBO,cAAG,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAEP,OAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAC;AAC1I,QAAQ,QAAQ,oBAAoBO,cAAG,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE;AAC5D;AACA;AACA,GAAG;AACH,CAAC;AACD,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}