@veracity/vui/dist/badge/badge.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import vui from "../core/vui.js";
import { Tag } from "../tag/tag.js";
import { useEffect } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/badge/badge.tsx
/**
* Badge is a non-interactive, pill-shaped alias of {@link Tag}.
*
* Appearance is controlled by two props:
*  - `variant`: `'subtle' | 'solid'`
*  - `color`:   `'grey' | 'green' | 'yellow' | 'red' | 'blue'`
*
* Use `icon` to place an icon on the leading side of the label.
* Badge fully delegates theming to Tag.
*/
const HIERARCHY = ["subtle", "solid"];
const Badge = vui((props, ref) => {
	const { variant: variantProp, color, icon, iconLeft, label, text, ...rest } = props;
	useEffect(() => {
		if (iconLeft !== void 0) console.warn("[Badge] `iconLeft` is deprecated. Use `icon` instead.");
	}, [iconLeft]);
	useEffect(() => {
		if (text !== void 0) console.warn("[Badge] `text` is deprecated. Use `label` instead.");
	}, [text]);
	const resolvedIcon = icon ?? iconLeft;
	const resolvedLabel = label ?? text;
	const hierarchy = HIERARCHY.includes(variantProp ?? "") ? variantProp : "subtle";
	return /* @__PURE__ */ jsx(Tag, {
		borderRadius: "9999px",
		className: "vui-badge",
		color: color ?? "grey",
		isInteractive: false,
		minW: "20px",
		ref,
		startIcon: resolvedIcon,
		text: resolvedLabel,
		variant: hierarchy,
		...rest,
		onDelete: void 0
	});
});
Badge.displayName = "Badge";

//#endregion
export { Badge, Badge as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=badge.js.map