Badge

1"use client";
2 
3import { forwardRef, type HTMLAttributes } from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { cn } from "@/lib/utils";
6import { useShape } from "@/lib/shape-context";
7 
8const badgeColors = {
9  gray: "#a3a3a3",
10  red: "#ef4444",
11  orange: "#f97316",
12  amber: "#f59e0b",
13  yellow: "#eab308",
14  lime: "#84cc16",
15  green: "#22c55e",
16  emerald: "#10b981",
17  teal: "#14b8a6",
18  cyan: "#06b6d4",
19  blue: "#3b82f6",
20  indigo: "#6366f1",
21  violet: "#8b5cf6",
22  purple: "#a855f7",
23  fuchsia: "#d946ef",
24  pink: "#ec4899",
25  rose: "#f43f5e",
26} as const;
27 
28type BadgeColor = keyof typeof badgeColors;
29 
30const badgeVariants = cva(
31  "inline-flex items-center font-medium whitespace-nowrap",
32  {
33    variants: {
34      variant: {
35        solid: "",
36        dot: "border border-border text-foreground",
37      },
38      size: {
39        sm: "h-5 px-2 text-[11px] gap-1",
40        md: "h-6 px-2.5 text-[12px] gap-1.5",
41        lg: "h-7 px-3 text-[13px] gap-1.5",
42      },
43    },
44    defaultVariants: {
45      variant: "solid",
46      size: "md",
47    },
48  }
49);
50 
51interface BadgeProps
52  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
53    VariantProps<typeof badgeVariants> {
54  color?: BadgeColor;
55}
56 
57const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
58  (
59    {
60      className,
61      variant = "solid",
62      size = "md",
63      color = "gray",
64      children,
65      style,
66      ...props
67    },
68    ref
69  ) => {
70    const shape = useShape();
71    const colorValue = badgeColors[color];
72    const isSolid = variant === "solid";
73    const dotSize = size === "sm" ? 6 : size === "lg" ? 8 : 7;
74 
75    const colorStyle = isSolid
76      ? color === "gray"
77        ? { backgroundColor: "var(--accent)", color: "var(--foreground)" }
78        : {
79            color: "var(--foreground)",
80            backgroundColor: `color-mix(in srgb, ${colorValue} 15%, var(--background))`,
81          }
82      : {};
83 
84    const dotColor = color === "gray" ? "var(--muted-foreground)" : colorValue;
85 
86    return (
87      <span
88        ref={ref}
89        className={cn(badgeVariants({ variant, size }), shape.item, className)}
90        style={{ ...colorStyle, ...style }}
91        {...props}
92      >
93        {!isSolid && (
94          <span
95            className="shrink-0 rounded-full"
96            style={{
97              width: dotSize,
98              height: dotSize,
99              backgroundColor: dotColor,
100            }}
101          />
102        )}
103// … truncated