Badge

1"use client";23import * as React from "react";4import { cva, type VariantProps } from "class-variance-authority";5import { cn } from "@/lib/utils";6import { sprawlify } from "@sprawlify/react";78const badgeVariants = cva(9  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",10  {11    variants: {12      variant: {13        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",14        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",15        destructive:16          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",17        outline:18          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",19        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",20        link: "text-primary underline-offset-4 [a&]:hover:underline",21      },22    },23    defaultVariants: {24      variant: "default",25    },26  },27);2829function Badge({30  className,31  variant = "default",32  ...props33}: React.ComponentProps<typeof sprawlify.span> & VariantProps<typeof badgeVariants>) {34  return (35    <sprawlify.span36      data-scope="badge"37      data-part="root"38      data-slot="badge"39      data-variant={variant}40      className={cn(badgeVariants({ variant }), className)}41      {...props}42    />43  );44}4546export { Badge, badgeVariants };47