xlibs-components/dist/components/magicui/magic-progress.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 magicProgressVariants = cva("relative w-full overflow-hidden rounded-full bg-secondary transition-all duration-300", {
    variants: {
        variant: {
            default: "bg-secondary",
            primary: "bg-primary/20",
            success: "bg-green-500/20",
            warning: "bg-yellow-500/20",
            destructive: "bg-destructive/20",
            magic: "bg-gradient-to-r from-primary/20 via-chart-2/20 to-chart-3/20",
            glass: "backdrop-blur-sm bg-card/50",
            neon: "bg-primary/10 shadow-[0_0_10px_rgba(var(--primary),0.1)]",
        },
        size: {
            default: "h-2",
            sm: "h-1",
            lg: "h-3",
            xl: "h-4",
        },
    },
    defaultVariants: {
        variant: "default",
        size: "default",
    },
});
const magicProgressIndicatorVariants = cva("h-full w-full flex-1 transition-all duration-300 ease-out relative overflow-hidden", {
    variants: {
        variant: {
            default: "bg-primary",
            primary: "bg-primary",
            success: "bg-green-500",
            warning: "bg-yellow-500",
            destructive: "bg-destructive",
            magic: "bg-gradient-to-r from-primary via-chart-2 to-chart-3",
            glass: "bg-primary/80 backdrop-blur-sm",
            neon: "bg-primary shadow-[0_0_10px_rgba(var(--primary),0.5)]",
        },
    },
    defaultVariants: {
        variant: "default",
    },
});
const MagicProgress = React.forwardRef(({ className, variant, size, value = 0, max = 100, showValue = false, animated = true, striped = false, glow = false, label, ...props }, ref) => {
    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
    return (_jsxs("div", { className: "w-full space-y-2", children: [(label || showValue) && (_jsxs("div", { className: "flex justify-between items-center text-small", children: [label && _jsx("span", { className: "text-foreground font-medium", children: label }), showValue && (_jsxs("span", { className: "text-muted-foreground", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { ref: ref, className: cn(magicProgressVariants({ variant, size, className }), glow && "shadow-[0_0_20px_rgba(var(--primary),0.1)]"), ...props, children: _jsxs("div", { className: cn(magicProgressIndicatorVariants({ variant }), animated && "transition-all duration-1000 ease-out", striped && "bg-gradient-to-r from-transparent via-white/20 to-transparent bg-[length:20px_100%] animate-pulse"), style: { width: `${percentage}%` }, children: [variant === "magic" && (_jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer" })), glow && (_jsx("div", { className: "absolute inset-0 bg-current opacity-20 blur-sm" }))] }) })] }));
});
MagicProgress.displayName = "MagicProgress";
export { MagicProgress, magicProgressVariants, magicProgressIndicatorVariants };