xlibs-components/dist/components/magicui/shiny-button.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 { motion } from "motion/react";
export const ShinyButton = React.forwardRef(({ children, className = "", variant = "default", size = "md", shimmer = true, onClick, ...props }, ref) => {
    const [isShimmering, setIsShimmering] = React.useState(false);
    const handleClick = () => {
        if (shimmer) {
            setIsShimmering(true);
            setTimeout(() => setIsShimmering(false), 800);
        }
        onClick?.();
    };
    const getVariantStyles = () => {
        switch (variant) {
            case "primary":
                return "btn-primary";
            case "secondary":
                return "btn-secondary";
            case "success":
                return "btn-success";
            case "warning":
                return "btn-warning";
            case "error":
                return "btn-destructive";
            default:
                return "btn-primary";
        }
    };
    const getSizeStyles = () => {
        switch (size) {
            case "sm":
                return "h-8 px-3 text-sm";
            case "lg":
                return "h-12 px-6 text-lg";
            default:
                return "h-10 px-4 text-base";
        }
    };
    return (_jsxs(motion.button, { ref: ref, className: `inline-flex items-center justify-center rounded-lg font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative overflow-hidden ${getVariantStyles()} ${getSizeStyles()} ${className}`, onClick: handleClick, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, ...props, children: [children, shimmer && (_jsx(motion.div, { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent", initial: { x: "-100%" }, animate: { x: isShimmering ? "100%" : "-100%" }, transition: { duration: 0.8, ease: "easeInOut" } }))] }));
});
ShinyButton.displayName = "ShinyButton";
// Static metadata export
export const shinyButtonMetadata = {
    displayName: "ShinyButton",
    preferredWidth: "auto",
    preferredHeight: 40,
    minWidth: 80,
    minHeight: 32,
    layoutHints: ["interactive", "animated", "action", "inline", "flexible-width", "shimmer-effect"]
};