import { isReactText, isString } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { TagProvider } from "./context.js";
import TagButton from "./tagButton.js";
import TagIcon from "./tagIcon.js";
import TagText from "./tagText.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/tag/tag.tsx
const TagBase = styled.spanBox`
  align-items: center;
  border-radius: xl;
  display: inline-flex;
  font-weight: medium;
  justify-content: center;
  line-height: normal;
  max-width: 100%;
  position: relative;
  transition-duration: fast;
  width: fit-content;

  &:focus {
    border-color: transparent;
    outline: none;
  }

  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    user-select: none;
  }
`;
/**
* Displays text, icons or custom content. Can be made interactive or a link.
* Exposes some props to the children via context.
*/
const Tag = vui((props, ref) => {
	const { casing, children, className, disabled, icon, iconLeft, iconRight, isFullWidth, isInteractive = props.onClick !== void 0 && props.onDelete === void 0, isRound, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = "md", text, variant = "subtleBlue", weight, ...rest } = props;
	const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = useStyleConfig("Tag", props).container;
	const context = useMemo(() => filterUndefined({
		disabled,
		size,
		variant
	}), [
		disabled,
		size,
		variant
	]);
	const spaceX = spaceXBase / 8;
	let spaceXText = (spaceXBase + 4) / 8;
	if (size === "xs") spaceXText = spaceXBase / 8;
	const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
	const pr = icon || itemRight || iconRight ? spaceX : spaceXText;
	const interactiveProps = !disabled && isInteractive ? {
		cursor: "pointer",
		hoverBg,
		activeBg,
		tabIndex: 0,
		userSelect: "none"
	} : {};
	const aliasedProps = filterUndefined({
		borderRadius: isRound ? h / 2 : void 0,
		"aria-disabled": disabled,
		fontWeight: weight,
		textTransform: casing,
		w: isFullWidth ? "100%" : void 0
	});
	return /* @__PURE__ */ jsx(TagProvider, {
		value: context,
		children: /* @__PURE__ */ jsxs(TagBase, {
			className: cs("vui-tag", className),
			focusRing: 2,
			h,
			isTruncated,
			onClick: !disabled ? onClick : void 0,
			pl,
			pr,
			ref,
			...tagStyles,
			...interactiveProps,
			...aliasedProps,
			...rest,
			children: [isString(icon) ? /* @__PURE__ */ jsx(TagIcon, { name: icon }) : icon, !icon && /* @__PURE__ */ jsxs(Fragment$1, { children: [
				itemLeft,
				isString(iconLeft) ? /* @__PURE__ */ jsx(TagIcon, {
					mr: spaceX,
					name: iconLeft
				}) : iconLeft,
				children ?? (isReactText(text) ? /* @__PURE__ */ jsx(TagText, {
					isTruncated,
					text
				}) : text),
				isString(iconRight) ? /* @__PURE__ */ jsx(TagIcon, {
					ml: spaceX,
					name: iconRight
				}) : iconRight,
				onDelete ? /* @__PURE__ */ jsx(TagButton, {
					"aria-label": "delete",
					disabled,
					isRound,
					ml: spaceX,
					onClick: (e) => onDelete?.(e)
				}) : itemRight
			] })]
		})
	});
});
Tag.Button = TagButton;
Tag.Icon = TagIcon;
Tag.Text = TagText;
Tag.displayName = "Tag";

//#endregion
export { TagBase, Tag as default };
globalThis.__vuiVersion__ = "4.0.0"
//# sourceMappingURL=tag.js.map