Badge

1import { mergeProps } from "@base-ui/react/merge-props";
2import { useRender } from "@base-ui/react/use-render";
3import { tv, type VariantProps } from "tailwind-variants";
4
5import { cn } from "@/lib/classes";
6
7const badgeVariants = tv({
8  base: `inline-flex items-center justify-center relative text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1.5px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden`,
9  variants: {
10    shape: {
11      simple: "rounded-full border px-2 py-0.5",
12      bar: "rounded-[7px] pl-3.5 pr-1.5 py-1 before:absolute before:left-1.5 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-[55%] before:bg-current before:rounded-full border border-transparent",
13      dot: "rounded-[7px] pl-4.5 pr-1.5 py-1 before:absolute before:left-1.5 before:top-1/2 before:-translate-y-1/2 before:size-2 before:bg-current before:rounded-full border border-transparent",
14    },
15    variant: {
16      default: "",
17      destructive: "",
18      secondary: "",
19      outline: "",
20    },
21  },
22  defaultVariants: {
23    shape: "simple",
24    variant: "default",
25  },
26  compoundVariants: [
27    // Simple
28    {
29      shape: "simple",
30      variant: "default",
31      class:
32        "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
33    },
34    {
35      shape: "simple",
36      variant: "destructive",
37      class:
38        "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
39    },
40    {
41      shape: "simple",
42      variant: "secondary",
43      class:
44        "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
45    },
46    {
47      shape: "simple",
48      variant: "outline",
49      class:
50        "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
51    },
52
53    // Bar
54    {
55      shape: "bar",
56      variant: "default",
57      class:
58        "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
59    },
60    {
61      shape: "bar",
62      variant: "destructive",
63      class:
64// … truncated