xlibs-components/dist/components/magicui/magic-badge.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from '../../lib/utils.js';
const magicBadgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 relative overflow-hidden", {
    variants: {
        variant: {
            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
            outline: "text-foreground",
            success: "border-transparent bg-success text-success-foreground hover:bg-success/80",
            warning: "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
            info: "border-transparent bg-info text-info-foreground hover:bg-info/80",
            magic: "border-primary/30 bg-gradient-to-r from-primary/20 via-chart-2/20 to-chart-3/20 text-primary-foreground hover:from-primary/30 hover:via-chart-2/30 hover:to-chart-3/30",
            glass: "backdrop-blur-sm border-border/50 bg-card/50 text-foreground hover:bg-card/80",
            neon: "border-primary/30 bg-primary/10 text-primary-foreground shadow-[0_0_10px_rgba(var(--primary),0.3)] hover:shadow-[0_0_15px_rgba(var(--primary),0.5)]",
            floating: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80 transform hover:-translate-y-0.5 hover:scale-105",
        },
        size: {
            default: "px-2.5 py-0.5 text-xs",
            sm: "px-2 py-0.5 text-xs",
            lg: "px-3 py-1 text-sm",
            xl: "px-4 py-1.5 text-base",
        },
    },
    defaultVariants: {
        variant: "default",
        size: "default",
    },
});
const MagicBadge = React.forwardRef(({ className, variant, size, icon, iconPosition = "left", pulse = false, glow = false, children, ...props }, ref) => {
    return (_jsxs("div", { className: cn(magicBadgeVariants({ variant, size, className }), pulse && "animate-pulse", glow && "shadow-[0_0_20px_rgba(var(--primary),0.3)]"), ref: ref, ...props, children: [icon && iconPosition === "left" && (_jsx("span", { className: "mr-1", children: icon })), children, icon && iconPosition === "right" && (_jsx("span", { className: "ml-1", children: icon })), variant === "magic" && (_jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-primary/20 via-chart-2/20 to-chart-3/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" })), pulse && (_jsx("div", { className: "absolute inset-0 rounded-full border-2 border-current opacity-20 animate-ping" }))] }));
});
MagicBadge.displayName = "MagicBadge";
export { MagicBadge, magicBadgeVariants };