import { cn } from "../../utils/cn.mjs";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Badge/index.tsx
/**
* Badge color variants enum
* @description Defines the available color themes for the badge component
*/
let BadgeColor = /* @__PURE__ */ function(BadgeColor$1) {
	BadgeColor$1["PRIMARY"] = "primary";
	BadgeColor$1["SECONDARY"] = "secondary";
	BadgeColor$1["DESTRUCTIVE"] = "destructive";
	BadgeColor$1["SUCCESS"] = "success";
	BadgeColor$1["ERROR"] = "error";
	BadgeColor$1["NEUTRAL"] = "neutral";
	BadgeColor$1["LIGHT"] = "light";
	BadgeColor$1["DARK"] = "dark";
	BadgeColor$1["TEXT"] = "text";
	BadgeColor$1["CUSTOM"] = "custom";
	return BadgeColor$1;
}({});
/**
* Badge visual variants enum
* @description Defines the available visual styles for the badge component
*/
let BadgeVariant = /* @__PURE__ */ function(BadgeVariant$1) {
	BadgeVariant$1["DEFAULT"] = "default";
	BadgeVariant$1["NONE"] = "none";
	BadgeVariant$1["OUTLINE"] = "outline";
	BadgeVariant$1["HOVERABLE"] = "hoverable";
	return BadgeVariant$1;
}({});
/**
* Badge size variants enum
* @description Defines the available sizes for the badge component
*/
let BadgeSize = /* @__PURE__ */ function(BadgeSize$1) {
	BadgeSize$1["SMALL"] = "sm";
	BadgeSize$1["MEDIUM"] = "md";
	BadgeSize$1["LARGE"] = "lg";
	return BadgeSize$1;
}({});
/**
* Badge component variants using class-variance-authority
* @description Defines the styling variants for different badge combinations
*/
const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
	variants: {
		color: {
			[BadgeColor.PRIMARY]: "border-primary bg-primary text-primary hover:bg-primary-500",
			[BadgeColor.SECONDARY]: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
			[BadgeColor.DESTRUCTIVE]: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
			[BadgeColor.SUCCESS]: "border-success bg-success text-success hover:bg-success-500",
			[BadgeColor.ERROR]: "border-error bg-error text-error hover:bg-error-500",
			[BadgeColor.NEUTRAL]: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
			[BadgeColor.LIGHT]: "border-white bg-white text-white hover:bg-neutral-500",
			[BadgeColor.DARK]: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
			[BadgeColor.TEXT]: "border-text bg-text text-text hover:opacity-80",
			[BadgeColor.CUSTOM]: ""
		},
		variant: {
			[BadgeVariant.DEFAULT]: "rounded-lg text-text-opposite",
			[BadgeVariant.NONE]: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
			[BadgeVariant.OUTLINE]: "rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30",
			[BadgeVariant.HOVERABLE]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
		},
		size: {
			[BadgeSize.SMALL]: "px-2 py-0.5 text-xs",
			[BadgeSize.MEDIUM]: "px-2.5 py-0.5 text-xs",
			[BadgeSize.LARGE]: "px-3 py-1 text-sm"
		}
	},
	defaultVariants: {
		variant: BadgeVariant.DEFAULT,
		color: BadgeColor.PRIMARY,
		size: BadgeSize.MEDIUM
	}
});
/**
* Badge component for displaying status indicators, labels, and notifications
*
* @description A flexible badge component that supports multiple visual styles, colors, and interactive features.
* It maintains accessibility standards and provides comprehensive customization options.
*
* @example
* ```tsx
* // Basic badge
* <Badge>New</Badge>
*
* // Colored badge
* <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>
*
* // Clickable badge
* <Badge clickable onClick={() => console.log('clicked')}>
*   Clickable
* </Badge>
*
* // Dismissible badge
* <Badge dismissible onDismiss={() => console.log('dismissed')}>
*   Dismissible
* </Badge>
* ```
*/
const Badge = ({ className, variant = BadgeVariant.DEFAULT, color = BadgeColor.PRIMARY, size = BadgeSize.MEDIUM, children, clickable = false, dismissible = false, onClick, onDismiss, role, tabIndex, "aria-label": ariaLabel, ...props }) => {
	const Component = clickable ? "button" : "span";
	const handleKeyDown = (event) => {
		if (clickable && onClick && (event.key === "Enter" || event.key === " ")) {
			event.preventDefault();
			onClick(event);
		}
	};
	const handleDismiss = (event) => {
		event.stopPropagation();
		onDismiss?.();
	};
	return /* @__PURE__ */ jsxs(Component, {
		className: cn(badgeVariants({
			variant,
			color,
			size
		}), clickable && "cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2", dismissible && "pr-1", className),
		onClick: clickable ? onClick : void 0,
		onKeyDown: clickable ? handleKeyDown : void 0,
		role: role || (clickable ? "button" : "status"),
		tabIndex: clickable ? tabIndex ?? 0 : tabIndex,
		"aria-label": ariaLabel || (clickable ? `${children} button` : void 0),
		...props,
		children: [children, dismissible && /* @__PURE__ */ jsx("button", {
			type: "button",
			className: "ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1",
			onClick: handleDismiss,
			"aria-label": `Remove ${children} badge`,
			children: /* @__PURE__ */ jsxs("svg", {
				className: "size-3",
				viewBox: "0 0 20 20",
				fill: "currentColor",
				"aria-label": "Remove badge",
				children: [/* @__PURE__ */ jsx("title", { children: "Remove badge" }), /* @__PURE__ */ jsx("path", {
					fillRule: "evenodd",
					d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
					clipRule: "evenodd"
				})]
			})
		})]
	});
};

//#endregion
export { Badge, BadgeColor, BadgeSize, BadgeVariant, badgeVariants };
//# sourceMappingURL=index.mjs.map