Badge

1import { mergeProps } from "@base-ui/react/merge-props"
2import { useRender } from "@base-ui/react/use-render"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/registry/lib/surface"
6 
7const badgeVariants = cva(
8  "group/badge inline-flex w-fit shrink-0 items-center gap-1.5 rounded-md border border-current bg-transparent px-2 py-[3px] font-mono text-[10px] font-medium tracking-[0.06em] lowercase whitespace-nowrap outline-none [&>svg]:pointer-events-none [&>svg]:size-3",
9  {
10    variants: {
11      variant: {
12        default: "text-muted-foreground",
13        filled: "border-primary bg-primary text-primary-foreground",
14        red: "text-u-red",
15        green: "text-u-green",
16        amber: "text-u-amber",
17        blue: "text-u-blue",
18      },
19    },
20    defaultVariants: {
21      variant: "default",
22    },
23  }
24)
25 
26function BadgeDot({ className }: { className?: string }) {
27  return (
28    <span
29      aria-hidden
30      className={cn("size-1.5 shrink-0 rounded-full bg-current", className)}
31    />
32  )
33}
34 
35function Badge({
36  className,
37  variant = "default",
38  render,
39  ...props
40}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
41  return useRender({
42    defaultTagName: "span",
43    props: mergeProps<"span">(
44      {
45        className: cn(badgeVariants({ variant }), className),
46      },
47      props
48    ),
49    render,
50    state: {
51      slot: "badge",
52      variant,
53    },
54  })
55}
56 
57export { Badge, BadgeDot, badgeVariants }