import { cn } from "./index3.js";
import { RemoveButton } from "./index85.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/molecules/data/Tag/Tag.tsx
/** biome-ignore-all lint/a11y/useSemanticElements: Tag uses span as container for inline display; interactive elements inside use proper button elements with aria labels */
var tagVariants = cva("inline-flex items-center justify-center gap-[3px] rounded-[6px] border border-border bg-background font-medium text-secondary-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none dark:border-border dark:bg-foreground dark:text-quaternary-foreground", {
	variants: { size: {
		sm: "px-2 py-[3px] text-xs leading-[18px]",
		md: "px-[9px] py-0.5 text-sm leading-5",
		lg: "px-2.5 py-1 text-sm leading-5"
	} },
	defaultVariants: { size: "md" }
});
var dotVariants = cva("shrink-0 rounded-full", {
	variants: {
		size: {
			sm: "size-1.5",
			md: "size-1.5",
			lg: "size-2"
		},
		color: {
			gray: "bg-muted",
			success: "bg-success/10",
			error: "bg-destructive/10",
			warning: "bg-warning/10",
			brand: "bg-primary/10"
		}
	},
	defaultVariants: {
		size: "md",
		color: "success"
	}
});
var countVariants = cva("flex items-center justify-center rounded-[3px] bg-surface-1 font-medium text-secondary-foreground dark:text-quaternary-foreground", {
	variants: { size: {
		sm: "h-4 min-w-[16px] px-1 text-xs",
		md: "h-5 min-w-[20px] px-1 text-xs",
		lg: "h-5 min-w-[20px] px-1.5 text-sm"
	} },
	defaultVariants: { size: "md" }
});
var checkboxVariants = cva("shrink-0 rounded border border-border bg-background dark:border-border dark:bg-foreground", {
	variants: { size: {
		sm: "size-3.5",
		md: "size-4",
		lg: "size-[18px]"
	} },
	defaultVariants: { size: "md" }
});
var removeButtonSizeMap = {
	sm: "sm",
	md: "sm",
	lg: "md"
};
var iconVariants = cva("shrink-0", {
	variants: { size: {
		sm: "size-4 [&>svg]:size-4",
		md: "size-4 [&>svg]:size-4",
		lg: "size-5 [&>svg]:size-5"
	} },
	defaultVariants: { size: "md" }
});
var avatarVariants = cva("shrink-0 overflow-hidden rounded-full ring-1 ring-fg-primary/8 dark:ring-fg-white/10", {
	variants: { size: {
		sm: "size-3.5",
		md: "size-4",
		lg: "size-5"
	} },
	defaultVariants: { size: "md" }
});
var Tag = React.forwardRef(({ className, size = "md", children, icon, dot, dotColor = "success", avatar, avatarAlt, checkbox, checked, onCheckedChange, removable, onRemove, count, rtl, ...props }, ref) => {
	const hasTrailingContent = removable || count !== void 0;
	const paddingClasses = cn(checkbox && size === "sm" && "ps-[5px]", checkbox && size === "md" && "ps-1.5", checkbox && size === "lg" && "ps-1.5", dot && size === "sm" && "ps-1.5", dot && size === "md" && "ps-[7px]", dot && size === "lg" && "ps-2", (icon || avatar) && size === "sm" && "ps-1", (icon || avatar) && size === "md" && "ps-1", (icon || avatar) && size === "lg" && "ps-1.5", hasTrailingContent && size === "sm" && "pe-1", hasTrailingContent && size === "md" && "pe-1", hasTrailingContent && size === "lg" && "pe-1.5");
	const contentGap = cn(size === "sm" && "gap-1", size === "md" && "gap-[5px]", size === "lg" && "gap-1.5");
	return /* @__PURE__ */ jsxs("span", {
		ref,
		dir: rtl ? "rtl" : void 0,
		className: cn(tagVariants({ size }), paddingClasses, className),
		...props,
		children: [/* @__PURE__ */ jsxs("span", {
			className: cn("flex items-center", contentGap),
			children: [
				checkbox && /* @__PURE__ */ jsx("button", {
					type: "button",
					role: "checkbox",
					"aria-checked": checked,
					"aria-label": `Toggle ${typeof children === "string" ? children : "tag"}`,
					onClick: () => onCheckedChange?.(!checked),
					className: cn(checkboxVariants({ size }), "transition-all duration-200 ease-smooth motion-reduce:transition-none", "hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", checked && "flex items-center justify-center bg-primary/10 border-primary"),
					children: checked && /* @__PURE__ */ jsx("svg", {
						className: cn("text-white transition-transform duration-200 ease-smooth motion-reduce:transition-none", size === "sm" && "size-2.5", size === "md" && "size-3", size === "lg" && "size-3.5"),
						viewBox: "0 0 12 12",
						fill: "none",
						stroke: "currentColor",
						strokeWidth: "2",
						strokeLinecap: "round",
						strokeLinejoin: "round",
						children: /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5" })
					})
				}),
				dot && !icon && !avatar && /* @__PURE__ */ jsx("span", { className: dotVariants({
					size,
					color: dotColor
				}) }),
				avatar && /* @__PURE__ */ jsx("span", {
					className: avatarVariants({ size }),
					children: typeof avatar === "string" ? /* @__PURE__ */ jsx("img", {
						src: avatar,
						alt: avatarAlt || "",
						className: "size-full object-cover"
					}) : avatar
				}),
				icon && !avatar && /* @__PURE__ */ jsx("span", {
					className: iconVariants({ size }),
					children: icon
				}),
				/* @__PURE__ */ jsx("span", {
					className: "whitespace-nowrap",
					children
				}),
				count !== void 0 && /* @__PURE__ */ jsx("span", {
					className: countVariants({ size }),
					children: count
				})
			]
		}), removable && /* @__PURE__ */ jsx(RemoveButton, {
			size: removeButtonSizeMap[size ?? "md"],
			onClick: onRemove,
			"aria-label": "Remove tag"
		})]
	});
});
Tag.displayName = "Tag";
//#endregion
export { Tag, tagVariants };

//# sourceMappingURL=index86.js.map