badge

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./badge.css"
6 
7const badgeVariants = cva(
8  "inline-flex items-center justify-center overflow-hidden whitespace-nowrap rounded-full [&_svg]:pointer-events-none [&_svg]:shrink-0",
9  {
10    variants: {
11      variant: {
12        brand: "badge-brand",
13        neutral: "badge-neutral",
14        success: "badge-success",
15        danger: "badge-danger",
16        warning: "badge-warning",
17      },
18      size: {
19        sm: "min-w-5 gap-[var(--layout-gap-xs)] px-[var(--layout-padding-sm)] py-[var(--layout-padding-2xs)] text-content-caption [&_svg]:size-3 [&_.badge-dot]:size-1.5",
20        md: "min-w-6 gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] py-[var(--layout-padding-xs)] text-content-caption [&_svg]:size-3 [&_.badge-dot]:size-1.5",
21        lg: "min-w-7 gap-[var(--layout-gap-sm)] px-[var(--layout-padding-lg)] py-[var(--layout-padding-xs)] text-content-note [&_svg]:size-3.5 [&_.badge-dot]:size-2",
22      },
23      type: {
24        fill: "",
25        light: "badge-light",
26        dash: "badge-dash",
27      },
28    },
29    defaultVariants: {
30      variant: "neutral",
31      size: "md",
32      type: "fill",
33    },
34  }
35)
36 
37function BadgeDot({ className }: { className?: string }) {
38  return <span className={cn("badge-dot shrink-0", className)} />
39}
40 
41function Badge({
42  className,
43  variant,
44  size,
45  type,
46  isFilled = false,
47  children,
48  ...props
49}: React.ComponentProps<"span"> &
50  VariantProps<typeof badgeVariants> & {
51    isFilled?: boolean
52  }) {
53  return (
54    <span
55      data-slot="badge"
56      className={cn(
57        badgeVariants({ variant, size, type, className }),
58        isFilled && "badge-filled"
59      )}
60      {...props}
61    >
62      {children}
63    </span>
64  )
65}
66 
67export { Badge, BadgeDot, badgeVariants }