1  import * as React from 'react'
 2  import { cva, type VariantProps } from 'class-variance-authority'
 3  import { cn } from '../../lib/utils'
 4  
 5  const badgeVariants = cva(
 6    'inline-flex items-center gap-1 rounded-[var(--radius-badge)] px-2 py-0.5 text-xs font-medium',
 7    {
 8      variants: {
 9        variant: {
10          default:  'bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border-default)]',
11          success:  'bg-[oklch(65.4%_0.17_162/0.22)] text-[oklch(65.4%_0.17_162)] border border-[oklch(65.4%_0.17_162/0.45)]',
12          error:    'bg-[oklch(60%_0.22_25/0.22)] text-[oklch(60%_0.22_25)] border border-[oklch(60%_0.22_25/0.45)]',
13          warning:  'bg-[oklch(72%_0.20_50/0.22)] text-[oklch(72%_0.20_50)] border border-[oklch(72%_0.20_50/0.45)]',
14          info:     'bg-[oklch(52.4%_0.22_264/0.22)] text-[oklch(65%_0.18_264)] border border-[oklch(52.4%_0.22_264/0.45)]',
15          pending:  'bg-[oklch(75%_0.15_264/0.22)] text-[oklch(65%_0_0)] border border-[oklch(75%_0.15_264/0.45)]',
16          alpha:    'bg-[oklch(52.4%_0.22_264/0.26)] text-[oklch(65%_0.18_264)] border border-[oklch(52.4%_0.22_264/0.5)]',
17          delta:    'bg-[oklch(80%_0.20_79/0.22)] text-[oklch(80%_0.20_79)] border border-[oklch(80%_0.20_79/0.45)]',
18        },
19      },
20      defaultVariants: {
21        variant: 'default',
22      },
23    }
24  )
25  
26  export interface BadgeProps
27    extends React.HTMLAttributes<HTMLSpanElement>,
28      VariantProps<typeof badgeVariants> {
29    dot?: boolean
30  }
31  
32  export function Badge({ className, variant, dot = false, children, ...props }: BadgeProps) {
33    return (
34      <span className={cn(badgeVariants({ variant, className }))} {...props}>
35        {dot && (
36          <span
37            className="h-1.5 w-1.5 rounded-full bg-current"
38            aria-hidden="true"
39          />
40        )}
41        {children}
42      </span>
43    )
44  }