"use client";
import * as React from 'react';
import { cva } from 'class-variance-authority';
import { X } from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
__name(cn, "cn");
var pillVariants = cva(
  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary/10 text-primary hover:bg-primary/20",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
        error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
var Pill = React.forwardRef(
  ({ className, variant, onRemove, children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      "span",
      {
        ref,
        className: cn(pillVariants({ variant }), className),
        ...props,
        children: [
          children,
          onRemove && /* @__PURE__ */ jsxs(
            "button",
            {
              type: "button",
              onClick: onRemove,
              className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
              children: [
                /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
              ]
            }
          )
        ]
      }
    );
  }
);
Pill.displayName = "Pill";

export { Pill, pillVariants };
