Badge

1import { cva, type VariantProps } from "class-variance-authority";
2import { Slot as SlotPrimitive } from "radix-ui";
3import type * as React from "react";
4 
5import { type MaterialAxisProps, type MaterialProps, materialSurface, splitAxisProps } from "@/lib/material";
6import { cn } from "@/lib/utils";
7 
8/* Variant classes carry BEHAVIOR only (text, hover, destructive chrome); the SURFACE comes from
9   materialSurface (the material system) — see SURFACE_ROLE below for how semantic variants ride it. */
10const badgeVariants = cva(
11  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2.5 py-0.5 text-xs font-semibold whitespace-nowrap transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
12  {
13    variants: {
14      variant: {
15        default: "border-transparent bg-primary text-primary-foreground shadow [a&]:hover:bg-primary/80",
16        glass: "text-foreground",
17        secondary: "text-muted-foreground",
18        destructive: "border border-destructive/50 text-destructive",
19        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20        ghost: "border-transparent [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
21        link: "border-transparent text-primary underline-offset-4 [a&]:hover:underline",
22      },
23    },
24    defaultVariants: {
25      variant: "glass",
26    },
27  },
28);
29 
30/* Each semantic variant's surface role (null = no glass surface — the variant styles itself, e.g.
31   default/outline/ghost/link; destructive rides a borderless glass surface, its red border its own). */
32const SURFACE_ROLE: Record<string, MaterialProps | null> = {
33  glass: {
34    border: true,
35  },
36  secondary: {
37    border: true,
38  },
39  destructive: {
40    size: "sm",
41  },
42  default: null,
43  outline: null,
44  ghost: null,
45  link: null,
46};
47 
48export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants>, MaterialAxisProps {
49  asChild?: boolean;
50}
51 
52function Badge({ className, variant, asChild = false, ...props }: BadgeProps) {
53  const Comp = asChild ? SlotPrimitive.Slot : "span";
54 
55  const [axes, rest] = splitAxisProps(props);
56  const m = materialSurface(SURFACE_ROLE[variant ?? "glass"] ?? null, axes);
57 
58  return (
59    <Comp
60      data-slot="badge"
61// … truncated