Badge

1// Base UI base badge — a plain host `<span>` carrying the shared cva strings.
2//
3// The cva block is byte-identical to the radix and React Aria bases (checked, not assumed), and no
4// primitive is involved: badge is a span with `data-slot` and `data-variant`, and nothing
5// underneath emits state. So there is no dialect here to get wrong, and no motion to mistranslate.
6//
7// NO ESCAPE HATCH, DELIBERATELY. Upstream's other bases each let a badge render as a different
8// element, and each does it differently: radix takes `asChild` and swaps in `Slot`; React Aria
9// takes a `render` FUNCTION and calls it with the computed props. Base UI has no Slot, and its own
10// convention is a `render` ELEMENT prop backed by `useRender` — but badge is not a Base UI
11// primitive, so nothing here decides which of those shapes upstream's Base UI badge actually
12// exposes, or whether it exposes one at all.
13//
14// Guessing would publish an API this base may not have, and an API shape is not something a later
15// commit can quietly correct. Adding the hatch once the upstream source is available is additive
16// and non-breaking; shipping the wrong one is not. This follows button.tsrx in the same base,
17// which omits `LinkButton` for the same reason. A consumer needing a different element today can
18// spread `badgeVariants({ variant })` onto it directly, which is what the class export is for.
19import { cva, type VariantProps } from 'class-variance-authority';
20 
21import { cn } from '@/lib/utils';
22import type { HostProps } from '@/lib/types';
23 
24export const badgeVariants = cva(
25	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
26	{
27		variants: {
28			variant: {
29				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
30				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
31				destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
32// … truncated