Badge

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8 
9export const badgeVariants = cva(
10  [
11    "relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap",
12    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
13  ].join(" "),
14  {
15    defaultVariants: {
16      size: "md",
17      color: "default",
18      variant: "soft",
19      shape: "rounded",
20    },
21    variants: {
22      size: {
23        sm: "px-2 py-0.5 text-mini font-medium [&_svg:not([class*='size-'])]:size-3",
24        md: "px-2.5 py-1 text-mini font-medium [&_svg:not([class*='size-'])]:size-3.5",
25        lg: "px-3 py-1.5 text-small font-medium [&_svg:not([class*='size-'])]:size-4",
26      },
27      shape: {
28        rounded: "rounded-[var(--radius-6)]",
29        pill: "rounded-full",
30      },
31      color: {
32        default: "",
33        success: "",
34        warning: "",
35        error: "",
36      },
37      variant: {
38        solid: "",
39        soft: "",
40        outlined: "",
41      },
42    },
43    compoundVariants: [
44      // Semantic colors use fixed hex tokens in both themes; the accent
45      // scale inverts in dark mode.
46      { color: "default", variant: "solid", class: "bg-ink text-[color:var(--base)]" },
47      { color: "success", variant: "solid", class: "bg-success text-success-fg" },
48      { color: "warning", variant: "solid", class: "bg-warning text-warning-fg" },
49      { color: "error",   variant: "solid", class: "bg-error text-error-fg" },
50      { color: "default", variant: "soft", class: "bg-fill-1 text-ink-muted" },
51      { color: "success", variant: "soft", class: "bg-success-soft-bg text-success-soft-fg" },
52      { color: "warning", variant: "soft", class: "bg-warning-soft-bg text-warning-soft-fg" },
53      { color: "error",   variant: "soft", class: "bg-error-soft-bg text-error-soft-fg" },
54      // Outlined: no fill, hairline border. Semantic borders retain the
55      // fixed role color while text uses the theme-adaptive foreground.
56      { color: "default", variant: "outlined", class: "border border-hairline text-ink-muted" },
57      { color: "success", variant: "outlined", class: "border border-success/40 text-success-soft-fg" },
58      { color: "warning", variant: "outlined", class: "border border-warning/40 text-warning-soft-fg" },
59// … truncated