badge

1"use client"
2 
3import * as React from "react"
4 
5import { createAnatomy } from "@ark-ui/react/anatomy"
6import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
7import { type VariantProps, cva } from "class-variance-authority"
8 
9import { cn } from "@/lib/utils"
10 
11const anatomy = createAnatomy("badge").parts("root")
12const parts = anatomy.build()
13 
14const badgeVariants = cva(
15  "inline-flex items-center justify-center rounded-full border px-1.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] [&>svg]:shrink-0 leading-normal",
16  {
17    variants: {
18      variant: {
19        default:
20          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
21        secondary:
22          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
23        destructive:
24          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
25        outline:
26          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
27      },
28    },
29    defaultVariants: {
30      variant: "default",
31    },
32  }
33)
34 
35export interface BadgeProps
36  extends HTMLArkProps<"span">,
37    VariantProps<typeof badgeVariants> {}
38 
39const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
40  ({ className, variant, ...props }, ref) => {
41    return (
42      <ark.span
43        ref={ref}
44        {...parts.root.attrs}
45        className={cn(badgeVariants({ variant }), className)}
46        {...props}
47      />
48    )
49  }
50)
51Badge.displayName = "Badge"
52 
53export { Badge, badgeVariants }