import { jsxs, jsx } from "react/jsx-runtime";
import "react";
import { S as Slot } from "../../index-DcJYRxi-.js";
import { c as cva } from "../../index-BHpUy2Ix.js";
import { S as StClose } from "../../StClose-BQuYK7Le.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
const badgeVariants = cva(
  "inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 gap-1 transition-colors overflow-hidden rounded-full px-2 py-0.5 text-xs font-medium [&>svg:not(.badge-remove-icon)]:size-3 [&>svg:not(.badge-remove-icon)]:pointer-events-none",
  {
    variants: {
      variant: {
        default: "bg-accent/10 text-accent [a&]:hover:bg-accent/20 [button&]:hover:bg-accent/20 [a&]:cursor-pointer [button&]:cursor-pointer",
        secondary: "bg-subtle text-subtle [a&]:hover:bg-strong [button&]:hover:bg-strong [a&]:cursor-pointer [button&]:cursor-pointer",
        success: "bg-positive text-positive [a&]:hover:opacity-90 [button&]:hover:opacity-90 [a&]:cursor-pointer [button&]:cursor-pointer",
        warning: "bg-warning text-warning [a&]:hover:opacity-90 [button&]:hover:opacity-90 [a&]:cursor-pointer [button&]:cursor-pointer",
        destructive: "bg-negative text-negative [a&]:hover:opacity-90 [button&]:hover:opacity-90 [a&]:cursor-pointer [button&]:cursor-pointer",
        info: "bg-blue-500/10 text-blue-700 dark:text-blue-400 [a&]:hover:bg-blue-500/20 [button&]:hover:bg-blue-500/20 [a&]:cursor-pointer [button&]:cursor-pointer"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
function Badge({
  className,
  variant,
  asChild = false,
  removable = false,
  onRemove,
  children,
  ...props
}) {
  const Comp = asChild ? Slot : "span";
  const handleRemove = (e) => {
    e.stopPropagation();
    onRemove?.();
  };
  const handleKeyDown = (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      e.stopPropagation();
      onRemove?.();
    }
  };
  return /* @__PURE__ */ jsxs(
    Comp,
    {
      "data-slot": "badge",
      className: cn(
        badgeVariants({ variant }),
        removable && "pr-1.5",
        className
      ),
      ...props,
      children: [
        children,
        removable && /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: handleRemove,
            onKeyDown: handleKeyDown,
            className: cn(
              "badge-remove-icon inline-flex size-3 shrink-0 items-center justify-center rounded-full transition-all cursor-pointer",
              "hover:opacity-80 focus:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
              "text-current opacity-70 hover:opacity-100 focus-visible:ring-current/50"
            ),
            "aria-label": "Remove",
            children: /* @__PURE__ */ jsx(StClose, { className: "size-2.5" })
          }
        )
      ]
    }
  );
}
Badge.displayName = "Badge";
export {
  Badge
};
