Badge

1"use client"
2
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { cn } from "@/lib/utils"
6import { useFyskConfig, type FyskIconPosition } from "@/components/fysk-provider"
7import { useFyskAnimation } from "@/components/hooks/useFyskAnimation"
8
9const badgeVariants = cva(
10    "inline-flex items-center rounded-full border transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 font-semibold whitespace-nowrap gap-1.5",
11    {
12        variants: {
13            variant: {
14                default: "border-transparent bg-primary text-primary-foreground hover:opacity-80 shadow-xs",
15                secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
16                outline: "text-foreground border-border",
17                ghost: "text-foreground border-transparent bg-transparent hover:bg-muted/50",
18                destructive: "border-transparent bg-destructive text-destructive-foreground hover:opacity-80 shadow-xs",
19
20                glass: "bg-foreground/10 backdrop-blur-md border-border/50 text-foreground shadow-xs",
21                success: "border-transparent bg-green-600 text-white hover:bg-green-600/80 shadow-xs",
22                warning: "border-transparent bg-yellow-600 text-white hover:bg-yellow-600/80 shadow-xs",
23                info: "border-transparent bg-blue-600 text-white hover:bg-blue-600/80 shadow-xs",
24            },
25            size: {
26                xs: "px-1.5 py-0 text-[9px] gap-1",
27                sm: "px-2 py-0 text-[10px]",
28                md: "px-2.5 py-0.5 text-xs",
29                lg: "px-3 py-1 text-sm",
30                xl: "px-4 py-1.5 text-base gap-2",
31            },
32            badgeStyle: {
33                native: "",
34                modern: "",
35            }
36        },
37        compoundVariants: [
38            {
39                variant: "success",
40                badgeStyle: "modern",
41                className: "bg-green-500/15 border-green-500/30 text-green-700 dark:text-green-400 hover:bg-green-500/25 opacity-100",
42            },
43            {
44                variant: "destructive",
45                badgeStyle: "modern",
46                className: "bg-destructive/15 border-destructive/30 text-destructive hover:bg-destructive/25 opacity-100",
47            },
48            {
49                variant: "warning",
50                badgeStyle: "modern",
51// … truncated