@lobehub/ui/es/base-ui/Tag/Tag.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
import { styles, variants } from "./style.mjs";
import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
import { memo, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cssVar, cx } from "antd-style";
import { X } from "lucide-react";
//#region src/base-ui/Tag/Tag.tsx
const Tag = memo(({ children, className, classNames, closable, closeIcon, color, icon, onClick, onClose, ref, shape = "normal", size = "middle", style, styles: customStyles, variant = "filled", ...rest }) => {
	const [visible, setVisible] = useState(true);
	const colors = useMemo(() => {
		let textColor = cssVar.colorTextSecondary;
		let backgroundColor;
		let borderColor;
		const isBorderless = variant === "borderless";
		const isFilled = variant === "filled";
		const isSolid = variant === "solid";
		const isPresetColor = color && presetColors.includes(color);
		const isPresetSystemColors = color && presetSystemColors.has(color);
		const isHexColor = color && color.startsWith("#");
		if (isPresetColor) {
			const solidBgColor = colorsPreset(color);
			textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, "active");
			backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
			borderColor = isSolid ? solidBgColor : colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
		}
		if (isPresetSystemColors) {
			const solidBgColor = colorsPresetSystem(color);
			textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);
			backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPresetSystem(color, "fillTertiary");
			borderColor = isSolid ? solidBgColor : colorsPresetSystem(color, isFilled ? "fillQuaternary" : "fillTertiary");
		}
		if (isHexColor) {
			textColor = isSolid ? safeReadableColor(color) : isBorderless ? color : cssVar.colorBgLayout;
			backgroundColor = isSolid ? color : isBorderless ? "transparent" : color;
			borderColor = isSolid ? color : borderColor;
		}
		return {
			backgroundColor,
			borderColor,
			textColor
		};
	}, [color, variant]);
	if (!visible) return null;
	return /* @__PURE__ */ jsxs("span", {
		className: cx(variants({
			shape,
			size,
			variant
		}), className, classNames?.root),
		ref,
		style: {
			background: colors.backgroundColor,
			borderColor: colors.borderColor,
			color: colors.textColor,
			cursor: onClick ? "pointer" : void 0,
			...style,
			...customStyles?.root
		},
		onClick,
		...rest,
		children: [
			icon,
			children,
			closable && /* @__PURE__ */ jsx("button", {
				"aria-label": "Close",
				className: cx(styles.close, classNames?.closeIcon),
				style: customStyles?.closeIcon,
				type: "button",
				onClick: (e) => {
					e.stopPropagation();
					onClose?.(e);
					setVisible(false);
				},
				children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 10 })
			})
		]
	});
});
Tag.displayName = "Tag";
//#endregion
export { Tag as default };

//# sourceMappingURL=Tag.mjs.map