Chip

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface ChipProps extends React.HTMLAttributes<HTMLButtonElement> {
7  disabled?: boolean;
8  onRemove?: () => void;
9  selected?: boolean;
10  size?: "sm" | "md";
11  variant?: "default" | "success" | "warning" | "danger";
12}
13 
14export function Chip({
15  selected = false,
16  onRemove,
17  variant = "default",
18  size = "sm",
19  disabled = false,
20  className,
21  children,
22  ...props
23}: ChipProps) {
24  const variants: Record<string, { base: string; active: string }> = {
25    danger: {
26      active: "border-red-500/40 bg-red-500/10 text-red-400",
27      base: "border-red-500/15 text-foreground/40 hover:border-red-500/30 hover:text-red-400/70",
28    },
29    default: {
30      active:
31        "border-primary/40 bg-primary/10 text-primary shadow-[0_0_6px_rgba(var(--primary-rgb,0,180,255),0.1)]",
32      base: "border-primary/15 text-foreground/40 hover:border-primary/30 hover:text-foreground/60",
33    },
34    success: {
35      active: "border-emerald-500/40 bg-emerald-500/10 text-emerald-400",
36      base: "border-emerald-500/15 text-foreground/40 hover:border-emerald-500/30 hover:text-emerald-400/70",
37    },
38    warning: {
39      active: "border-amber-500/40 bg-amber-500/10 text-amber-400",
40      base: "border-amber-500/15 text-foreground/40 hover:border-amber-500/30 hover:text-amber-400/70",
41    },
42  };
43 
44  const v = variants[variant];
45 
46  return (
47    <button
48      type="button"
49      disabled={disabled}
50      data-slot="tron-chip"
51      className={cn(
52        "inline-flex items-center gap-1.5 rounded-full border font-mono uppercase tracking-widest transition-all",
53        size === "sm" ? "px-2.5 py-0.5 text-[8px]" : "px-3 py-1 text-[9px]",
54        disabled && "cursor-not-allowed opacity-40",
55        selected ? v.active : v.base,
56        className
57      )}
58      {...props}
59    >
60      {children}
61      {onRemove ? (
62        <span
63          role="button"
64          tabIndex={0}
65          onClick={(e) => {
66            e.stopPropagation();
67            onRemove();
68          }}
69          onKeyDown={(e) => {
70            if (e.key === "Enter") {
71              e.stopPropagation();
72              onRemove();
73            }
74          }}
75          className="ml-0.5 flex h-3 w-3 items-center justify-center rounded-full hover:bg-foreground/10"
76        >
77          <svg
78            aria-hidden="true"
79            width="5"
80            height="5"
81            viewBox="0 0 5 5"
82            fill="none"
83          >
84// … truncated