my-animated-components/dist/index.js

A comprehensive React component library with built-in Framer Motion animations, Tailwind CSS styling, and full TypeScript support.

'use strict';

var React = require('react');
var framerMotion = require('framer-motion');
var reactDom = require('react-dom');

const Accordion = ({ className = '', items, color = 'primary', variant = 'elevated', radius = 'lg', motionVariant = 'fadeIn', allowMultipleOpen = false, defaultOpenIndex = [], customIcon, iconPosition = 'right', wrapperClassName = '', headerClassName = '', contentClassName = '', ...rest }) => {
    const [openIndexes, setOpenIndexes] = React.useState(defaultOpenIndex);
    const toggleItem = (index) => {
        if (allowMultipleOpen) {
            setOpenIndexes((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
        }
        else {
            setOpenIndexes((prev) => (prev.includes(index) ? [] : [index]));
        }
    };
    const isOpen = (index) => openIndexes.includes(index);
    const colorStyles = {
        primary: {
            solid: 'bg-blue-50 border border-blue-200 text-blue-900',
            outline: 'border border-blue-300 text-blue-700 bg-transparent',
            ghost: 'text-blue-700 bg-transparent hover:bg-blue-50/50',
            glass: 'bg-blue-50/40 backdrop-blur-md border border-blue-200/50 text-blue-900',
            elevated: 'bg-white border border-gray-100 shadow-md shadow-gray-200/50 text-gray-800',
        },
        secondary: {
            solid: 'bg-gray-50 border border-gray-200 text-gray-900',
            outline: 'border border-gray-300 text-gray-700 bg-transparent',
            ghost: 'text-gray-700 bg-transparent hover:bg-gray-50/50',
            glass: 'bg-gray-50/40 backdrop-blur-md border border-gray-200/50 text-gray-900',
            elevated: 'bg-white border border-gray-100 shadow-md shadow-gray-200/50 text-gray-800',
        },
        danger: {
            solid: 'bg-red-50 border border-red-200 text-red-900',
            outline: 'border border-red-300 text-red-700 bg-transparent',
            ghost: 'text-red-700 bg-transparent hover:bg-red-50/50',
            glass: 'bg-red-50/40 backdrop-blur-md border border-red-200/50 text-red-900',
            elevated: 'bg-white border border-gray-100 shadow-md shadow-gray-200/50 text-gray-800',
        },
        success: {
            solid: 'bg-green-50 border border-green-200 text-green-900',
            outline: 'border border-green-300 text-green-700 bg-transparent',
            ghost: 'text-green-700 bg-transparent hover:bg-green-50/50',
            glass: 'bg-green-50/40 backdrop-blur-md border border-green-200/50 text-green-900',
            elevated: 'bg-white border border-gray-100 shadow-md shadow-gray-200/50 text-gray-800',
        },
        info: {
            solid: 'bg-cyan-50 border border-cyan-200 text-cyan-900',
            outline: 'border border-cyan-300 text-cyan-700 bg-transparent',
            ghost: 'text-cyan-700 bg-transparent hover:bg-cyan-50/50',
            glass: 'bg-cyan-50/40 backdrop-blur-md border border-cyan-200/50 text-cyan-900',
            elevated: 'bg-white border border-gray-100 shadow-md shadow-gray-200/50 text-gray-800',
        },
        warning: {
            solid: 'bg-yellow-50 border border-yellow-200 text-yellow-900',
            outline: 'border border-yellow-300 text-yellow-700 bg-transparent',
            ghost: 'text-yellow-700 bg-transparent hover:bg-yellow-50/50',
            glass: 'bg-yellow-50/40 backdrop-blur-md border border-yellow-200/50 text-yellow-900',
            elevated: 'bg-white border border-gray-100 shadow-md shadow-gray-200/50 text-gray-800',
        },
    };
    const getRadiusClasses = () => {
        switch (radius) {
            case 'none': return 'rounded-none';
            case 'sm': return 'rounded-sm';
            case 'md': return 'rounded-md';
            case 'lg': return 'rounded-lg';
            case 'xl': return 'rounded-xl';
            case '2xl': return 'rounded-2xl';
            case 'full': return 'rounded-3xl';
            default: return `rounded-${radius}`;
        }
    };
    const variantClasses = (colorStyles[color] || colorStyles.primary)[variant] || colorStyles.primary.elevated;
    return (React.createElement("div", { className: `space-y-3 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `overflow-hidden transition-colors duration-300 ease-out focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-${color}-400/50 ${getRadiusClasses()} ${variantClasses} ${wrapperClassName}` },
        React.createElement("button", { disabled: item.disabled, className: `w-full flex justify-between items-center px-5 py-3 text-left font-medium outline-none transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${isOpen(index) ? 'bg-black/5' : 'hover:bg-black/5'} ${headerClassName}`, onClick: () => !item.disabled && toggleItem(index), "aria-expanded": isOpen(index) },
            iconPosition === 'left' && (React.createElement("span", { className: "mr-2" }, customIcon ?? (React.createElement(framerMotion.motion.svg, { className: "w-5 h-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", animate: { rotate: isOpen(index) ? 180 : 0 }, transition: { duration: 0.3 } },
                React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }))))),
            React.createElement("span", { className: "flex-1" }, item.title),
            iconPosition === 'right' && (React.createElement("span", { className: "ml-2" }, customIcon ?? (React.createElement(framerMotion.motion.svg, { className: "w-5 h-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", animate: { rotate: isOpen(index) ? 180 : 0 }, transition: { duration: 0.3 } },
                React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" })))))),
        React.createElement(framerMotion.AnimatePresence, null, isOpen(index) && (React.createElement(framerMotion.motion.div, { key: "content", initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }, className: `overflow-hidden` },
            React.createElement("div", { className: `px-5 py-4 text-sm opacity-90 border-t border-black/5 ${contentClassName}`, ...rest }, item.content)))))))));
};

function getVariantVisible(variantKey) {
    const variant = motionVariants[variantKey]?.visible;
    return typeof variant === 'function' ? undefined : variant;
}
const motionVariants = {
    null: {},
    fadeIn: {
        hidden: { opacity: 0 },
        visible: { opacity: 1, transition: { duration: 0.5 } },
    },
    zoomIn: {
        hidden: { scale: 0.8, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
    },
    slideUp: {
        hidden: { y: 50, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideDown: {
        hidden: { y: -50, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideLeft: {
        hidden: { x: 50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideRight: {
        hidden: { x: -50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    bounce: {
        hidden: { scale: 0.8 },
        visible: { scale: 1, transition: { type: 'spring', stiffness: 100 } },
    },
    rotateIn: {
        hidden: { rotate: -90, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    stagger: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.2 },
        },
    },
    flip: {
        hidden: { rotateY: 90, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    fadeOut: {
        hidden: { opacity: 1 },
        visible: { opacity: 0, transition: { duration: 0.5 } },
    },
    zoomOut: {
        hidden: { scale: 1, opacity: 1 },
        visible: { scale: 0.8, opacity: 0, transition: { duration: 0.5 } },
    },
    scaleUp: {
        hidden: { scale: 0.5, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
    },
    scaleDown: {
        hidden: { scale: 1.2, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
    },
    fadeInUp: {
        hidden: { opacity: 0, y: 50 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
    },
    fadeInDown: {
        hidden: { opacity: 0, y: -50 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
    },
    fadeInLeft: {
        hidden: { opacity: 0, x: -50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
    },
    fadeInRight: {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
    },
    rotateBounce: {
        hidden: { rotate: -45, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
    },
    scaleBounce: {
        hidden: { scale: 0.5 },
        visible: { scale: 1.2, transition: { type: 'spring', stiffness: 100 } },
    },
    fadeInScale: {
        hidden: { opacity: 0, scale: 0.8 },
        visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
    },
    bounceOut: {
        hidden: { scale: 1.2 },
        visible: { scale: 0.8, transition: { type: 'spring', stiffness: 100 } },
    },
    shake: {
        hidden: { x: 0 },
        visible: { x: [0, -10, 10, -10, 10, 0], transition: { duration: 0.6, repeat: Infinity } },
    },
    pulse: {
        hidden: { scale: 1 },
        visible: { scale: [1, 1.1, 1], transition: { duration: 1.5, repeat: Infinity } },
    },
    fadeInFast: {
        hidden: { opacity: 0 },
        visible: { opacity: 1, transition: { duration: 0.2 } },
    },
    slideUpFast: {
        hidden: { y: 30, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    fadeUp: {
        hidden: { opacity: 0, y: 50 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
    },
    zoomInFast: {
        hidden: { scale: 0.6, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
    },
    zoomOutFast: {
        hidden: { scale: 1, opacity: 1 },
        visible: { scale: 0.6, opacity: 0, transition: { duration: 0.3 } },
    },
    slideDownFast: {
        hidden: { y: -30, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    rotateOut: {
        hidden: { rotate: 180, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    flipFast: {
        hidden: { rotateY: 90, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    staggerUp: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.15 },
        },
    },
    flipIn: {
        hidden: { rotateY: 180, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    fadeInSlow: {
        hidden: { opacity: 0 },
        visible: { opacity: 1, transition: { duration: 1.5 } },
    },
    slideUpSlow: {
        hidden: { y: 50, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    slideDownSlow: {
        hidden: { y: -50, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    slideLeftSlow: {
        hidden: { x: 50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    slideRightSlow: {
        hidden: { x: -50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    bounceSlow: {
        hidden: { scale: 0.8 },
        visible: { scale: 1, transition: { type: 'spring', stiffness: 50 } },
    },
    rotateInSlow: {
        hidden: { rotate: -90, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    staggerSlow: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.5 },
        },
    },
    flipSlow: {
        hidden: { rotateY: 90, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    scaleBounceSlow: {
        hidden: { scale: 0.6 },
        visible: { scale: 1, transition: { type: 'spring', stiffness: 50 } },
    },
    rotateOutFast: {
        hidden: { rotate: 180, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    scaleUpFast: {
        hidden: { scale: 0.5, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
    },
    scaleDownFast: {
        hidden: { scale: 1.2, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
    },
    bounceFast: {
        hidden: { scale: 0.8 },
        visible: { scale: 1, transition: { type: 'spring', stiffness: 100 } },
    },
    flipInFast: {
        hidden: { rotateY: 180, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    fadeInLeftFast: {
        hidden: { opacity: 0, x: -50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
    },
    fadeInRightFast: {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
    },
    fadeInUpFast: {
        hidden: { opacity: 0, y: 30 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
    },
    fadeInDownFast: {
        hidden: { opacity: 0, y: -30 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
    },
    scaleUpSlow: {
        hidden: { scale: 0.5, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
    },
    scaleDownSlow: {
        hidden: { scale: 1.2, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
    },
    rotateInFast: {
        hidden: { rotate: -90, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    staggerChildren: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.25 },
        },
    },
    fadeUpSlow: {
        hidden: { opacity: 0, y: 50 },
        visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
    },
    slideInFromLeft: {
        hidden: { x: -100, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideInFromRight: {
        hidden: { x: 100, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideInFromTop: {
        hidden: { y: -100, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideInFromBottom: {
        hidden: { y: 100, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    fadeInSlowFromTop: {
        hidden: { opacity: 0, y: -50 },
        visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
    },
    fadeInSlowFromBottom: {
        hidden: { opacity: 0, y: 50 },
        visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
    },
    fadeInSlowFromLeft: {
        hidden: { opacity: 0, x: -50 },
        visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
    },
    fadeInSlowFromRight: {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
    },
    bounceIn: {
        hidden: { scale: 0.8 },
        visible: { scale: 1, transition: { type: 'spring', stiffness: 150 } },
    },
    zoomOutSlow: {
        hidden: { scale: 1, opacity: 1 },
        visible: { scale: 0.6, opacity: 0, transition: { duration: 1.5 } },
    },
    fadeInFastFromTop: {
        hidden: { opacity: 0, y: -30 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
    },
    fadeInFastFromBottom: {
        hidden: { opacity: 0, y: 30 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
    },
    slideInLeftFast: {
        hidden: { x: -50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    slideInRightFast: {
        hidden: { x: 50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    fadeInRotate: {
        hidden: { opacity: 0, rotate: -45 },
        visible: { opacity: 1, rotate: 0, transition: { duration: 0.5 } },
    },
    scaleInFast: {
        hidden: { scale: 0.8 },
        visible: { scale: 1, transition: { duration: 0.3 } },
    },
    zoomInBig: {
        hidden: { scale: 0.3 },
        visible: { scale: 1, transition: { duration: 1.5 } },
    },
    slideInDiagonal: {
        hidden: { x: -100, y: -100, opacity: 0 },
        visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    rotate360: {
        hidden: { rotate: 0, opacity: 0 },
        visible: { rotate: 360, opacity: 1, transition: { duration: 1 } },
    },
    flipInX: {
        hidden: { rotateX: 90, opacity: 0 },
        visible: { rotateX: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    staggerChildrenFast: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.15, duration: 0.3 },
        },
    },
    pulseFast: {
        hidden: { scale: 1 },
        visible: { scale: [1, 1.1, 1], transition: { duration: 0.8, repeat: Infinity } },
    },
    slideInDiagonalFast: {
        hidden: { x: -80, y: -80, opacity: 0 },
        visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    fadeInRightSlow: {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
    },
    zoomOutSlowFromCenter: {
        hidden: { scale: 1.2, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
    },
    flipBounce: {
        hidden: { rotateY: 90, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { type: 'spring', stiffness: 150 } },
    },
    slideInFromTopFast: {
        hidden: { y: -50, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    fadeInDiagonal: {
        hidden: { opacity: 0, x: -50, y: -50 },
        visible: { opacity: 1, x: 0, y: 0, transition: { duration: 0.5 } },
    },
    zoomInBounce: {
        hidden: { scale: 0.5, opacity: 0 },
        visible: { scale: 1.1, opacity: 1, transition: { type: 'spring', stiffness: 150 } },
    },
    rotateInOut: {
        hidden: { rotate: -180, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 1 } },
    },
    staggerUpFast: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.1, duration: 0.3 },
        },
    },
    fadeInRotateIn: {
        hidden: { opacity: 0, rotate: -45 },
        visible: { opacity: 1, rotate: 0, transition: { duration: 0.5 } },
    },
    scaleInQuick: {
        hidden: { scale: 0.7, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.2 } },
    },
    slideInFromBottomSlow: {
        hidden: { y: 80, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    flipRotateOut: {
        hidden: { rotateY: 180, opacity: 0 },
        visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
    },
    slideLeftFast: {
        hidden: { x: -50, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    zoomInBigFast: {
        hidden: { scale: 0.4, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.2 } },
    },
    fadeInUpFastSlow: {
        hidden: { opacity: 0, y: 30 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
    },
    rotateOutSlow: {
        hidden: { rotate: 90, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 1.5 } },
    },
    staggerLeft: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.2, duration: 0.6 },
        },
    },
    rotateOutFastReverse: {
        hidden: { rotate: 180, opacity: 0 },
        visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    scaleDownBounce: {
        hidden: { scale: 1.2 },
        visible: { scale: 0.9, transition: { type: 'spring', stiffness: 100 } },
    },
    fadeInFastFromLeft: {
        hidden: { opacity: 0, x: -50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
    },
    fadeInFastFromRight: {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
    },
    bounceSlowFast: {
        hidden: { scale: 0.6 },
        visible: { scale: 1, transition: { type: 'spring', stiffness: 75 } },
    },
    slideInFromTopFastReverse: {
        hidden: { y: -80, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
    },
    fadeOutFast: {
        hidden: { opacity: 1 },
        visible: { opacity: 0, transition: { duration: 0.3 } },
    },
    flipScaleUp: {
        hidden: { rotateY: 90, opacity: 0, scale: 0.7 },
        visible: { rotateY: 0, opacity: 1, scale: 1, transition: { duration: 0.5 } },
    },
    slideOutRight: {
        hidden: { x: 0, opacity: 1 },
        visible: { x: 100, opacity: 0, transition: { duration: 0.5 } },
    },
    zoomOutBounce: {
        hidden: { scale: 1, opacity: 1 },
        visible: { scale: 0.5, opacity: 0, transition: { type: 'spring', stiffness: 150 } },
    },
    fadeUpReverse: {
        hidden: { opacity: 0, y: -50 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
    },
    staggerUpReverse: {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.2, duration: 0.4 },
        },
    },
    scaleInFromLeft: {
        hidden: { scale: 0.7, opacity: 0 },
        visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
    },
    flipOut: {
        hidden: { rotateY: 0, opacity: 1 },
        visible: { rotateY: 90, opacity: 0, transition: { duration: 0.3 } },
    },
};

const Alert = ({ children, className = '', color = 'primary', variant = 'flat', radius = 'lg', onClose, motionVariant = 'fadeIn', ...rest }) => {
    const getRadiusClasses = () => {
        switch (radius) {
            case 'none': return 'rounded-none';
            case 'sm': return 'rounded-sm';
            case 'md': return 'rounded-md';
            case 'lg': return 'rounded-lg';
            case 'xl': return 'rounded-xl';
            case '2xl': return 'rounded-2xl';
            case 'full': return 'rounded-3xl';
            default: return `rounded-${radius}`;
        }
    };
    const colorClasses = {
        primary: {
            flat: 'bg-blue-50 text-blue-800 border border-blue-200',
            solid: 'bg-blue-600 text-white shadow-md shadow-blue-500/20',
            glass: 'bg-blue-500/10 backdrop-blur-md text-blue-800 border border-blue-200/50',
        },
        secondary: {
            flat: 'bg-gray-50 text-gray-800 border border-gray-200',
            solid: 'bg-gray-700 text-white shadow-md shadow-gray-700/20',
            glass: 'bg-gray-500/10 backdrop-blur-md text-gray-800 border border-gray-200/50',
        },
        success: {
            flat: 'bg-green-50 text-green-800 border border-green-200',
            solid: 'bg-green-600 text-white shadow-md shadow-green-500/20',
            glass: 'bg-green-500/10 backdrop-blur-md text-green-800 border border-green-200/50',
        },
        danger: {
            flat: 'bg-red-50 text-red-800 border border-red-200',
            solid: 'bg-red-600 text-white shadow-md shadow-red-500/20',
            glass: 'bg-red-500/10 backdrop-blur-md text-red-800 border border-red-200/50',
        },
        warning: {
            flat: 'bg-yellow-50 text-yellow-800 border border-yellow-200',
            solid: 'bg-yellow-500 text-gray-900 shadow-md shadow-yellow-500/20',
            glass: 'bg-yellow-500/10 backdrop-blur-md text-yellow-800 border border-yellow-200/50',
        },
        info: {
            flat: 'bg-cyan-50 text-cyan-800 border border-cyan-200',
            solid: 'bg-cyan-600 text-white shadow-md shadow-cyan-500/20',
            glass: 'bg-cyan-500/10 backdrop-blur-md text-cyan-800 border border-cyan-200/50',
        },
    };
    const closeButtonClasses = {
        primary: {
            flat: 'text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus:ring-blue-400',
            solid: 'text-white/80 hover:bg-white/20 hover:text-white focus:ring-white/50',
            glass: 'text-blue-500 hover:bg-blue-500/10 hover:text-blue-700 focus:ring-blue-400',
        },
        secondary: {
            flat: 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:ring-gray-400',
            solid: 'text-white/80 hover:bg-white/20 hover:text-white focus:ring-white/50',
            glass: 'text-gray-500 hover:bg-gray-500/10 hover:text-gray-700 focus:ring-gray-400',
        },
        success: {
            flat: 'text-green-500 hover:bg-green-100 hover:text-green-700 focus:ring-green-400',
            solid: 'text-white/80 hover:bg-white/20 hover:text-white focus:ring-white/50',
            glass: 'text-green-500 hover:bg-green-500/10 hover:text-green-700 focus:ring-green-400',
        },
        danger: {
            flat: 'text-red-500 hover:bg-red-100 hover:text-red-700 focus:ring-red-400',
            solid: 'text-white/80 hover:bg-white/20 hover:text-white focus:ring-white/50',
            glass: 'text-red-500 hover:bg-red-500/10 hover:text-red-700 focus:ring-red-400',
        },
        warning: {
            flat: 'text-yellow-600 hover:bg-yellow-100 hover:text-yellow-800 focus:ring-yellow-500',
            solid: 'text-gray-600 hover:bg-black/10 hover:text-gray-900 focus:ring-black/20',
            glass: 'text-yellow-600 hover:bg-yellow-500/10 hover:text-yellow-800 focus:ring-yellow-500',
        },
        info: {
            flat: 'text-cyan-500 hover:bg-cyan-100 hover:text-cyan-700 focus:ring-cyan-400',
            solid: 'text-white/80 hover:bg-white/20 hover:text-white focus:ring-white/50',
            glass: 'text-cyan-500 hover:bg-cyan-500/10 hover:text-cyan-700 focus:ring-cyan-400',
        },
    };
    // Safe fallbacks using "primary" and "flat" structure if colors are unknown
    const appliedVariant = (colorClasses[color] || colorClasses.primary)[variant] || colorClasses.primary.flat;
    const appliedCloseButton = (closeButtonClasses[color] || closeButtonClasses.primary)[variant] || closeButtonClasses.primary.flat;
    return (React.createElement(framerMotion.motion.div, { className: `p-4 ${getRadiusClasses()} ${appliedVariant} ${className}`, role: "alert", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", ...rest },
        React.createElement("div", { className: "flex items-start" },
            React.createElement("div", { className: "flex-grow pt-0.5" }, children),
            onClose && (React.createElement("button", { type: "button", className: `ml-3 -mr-1 -mt-1 rounded-lg focus:outline-none focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 transition-colors duration-200 ${appliedCloseButton}`, onClick: onClose, "aria-label": "Close" },
                React.createElement("span", { className: "sr-only" }, "Close"),
                React.createElement("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
                    React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" })))))));
};

const Avatar = ({ className = '', size = 'md', radius = 'full', src, alt, initials, fallbackIcon, ...rest }) => {
    const sizeClasses = {
        xs: 'w-6 h-6 text-[10px]',
        sm: 'w-8 h-8 text-xs',
        md: 'w-10 h-10 text-sm md:w-11 md:h-11 md:text-base',
        lg: 'w-12 h-12 text-base md:w-14 md:h-14 md:text-lg',
        xl: 'w-14 h-14 text-lg md:w-16 md:h-16 md:text-xl',
        '2xl': 'w-16 h-16 text-xl md:w-20 md:h-20 md:text-2xl',
        full: 'w-full h-full text-base',
    };
    const getRadiusClasses = () => {
        switch (radius) {
            case 'none': return 'rounded-none';
            case 'sm': return 'rounded-sm';
            case 'md': return 'rounded-md';
            case 'lg': return 'rounded-lg';
            case 'xl': return 'rounded-xl';
            case '2xl': return 'rounded-2xl';
            case 'full': return 'rounded-full';
            default: return `rounded-${radius}`;
        }
    };
    return (React.createElement(framerMotion.motion.div, { ...rest, className: `relative inline-flex items-center justify-center font-medium ${sizeClasses[size] || sizeClasses.md} ${getRadiusClasses()} bg-gray-100 text-gray-600 border border-gray-200/50 shadow-sm overflow-hidden flex-shrink-0 ${className}` }, src ? (React.createElement("img", { src: src, alt: alt || 'Avatar', className: "w-full h-full object-cover" })) : initials ? (React.createElement("span", null, initials)) : fallbackIcon ? (fallbackIcon) : (React.createElement("svg", { className: "w-3/5 h-3/5 text-gray-400", fill: "currentColor", viewBox: "0 0 24 24" },
        React.createElement("path", { d: "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" })))));
};

const Badge = ({ children, className = '', color = 'primary', size = 'md', variant = 'solid', radius = 'full', motionVariant = 'fadeIn', ...rest }) => {
    const getRadiusClasses = () => {
        switch (radius) {
            case 'none': return 'rounded-none';
            case 'sm': return 'rounded-sm';
            case 'md': return 'rounded-md';
            case 'lg': return 'rounded-lg';
            case 'xl': return 'rounded-xl';
            case '2xl': return 'rounded-2xl';
            case 'full': return 'rounded-full';
            default: return `rounded-${radius}`;
        }
    };
    const getVariantClasses = () => {
        switch (variant) {
            case 'solid':
                return {
                    primary: 'bg-blue-600 text-white shadow-sm shadow-blue-500/20',
                    secondary: 'bg-gray-700 text-white shadow-sm shadow-gray-700/20',
                    success: 'bg-green-500 text-white shadow-sm shadow-green-500/20',
                    danger: 'bg-red-500 text-white shadow-sm shadow-red-500/20',
                    warning: 'bg-yellow-400 text-gray-900 shadow-sm shadow-yellow-400/20',
                    info: 'bg-cyan-500 text-white shadow-sm shadow-cyan-500/20',
                }[color] || 'bg-blue-600 text-white';
            case 'outline':
                return {
                    primary: 'border border-blue-600 text-blue-600',
                    secondary: 'border border-gray-600 text-gray-700',
                    success: 'border border-green-500 text-green-600',
                    danger: 'border border-red-500 text-red-600',
                    warning: 'border border-yellow-500 text-yellow-600',
                    info: 'border border-cyan-500 text-cyan-600',
                }[color] || 'border border-blue-600 text-blue-600';
            case 'glass':
                return {
                    primary: 'bg-blue-500/10 backdrop-blur-md text-blue-700 border border-blue-200/50',
                    secondary: 'bg-gray-500/10 backdrop-blur-md text-gray-800 border border-gray-200/50',
                    success: 'bg-green-500/10 backdrop-blur-md text-green-800 border border-green-200/50',
                    danger: 'bg-red-500/10 backdrop-blur-md text-red-800 border border-red-200/50',
                    warning: 'bg-yellow-500/10 backdrop-blur-md text-yellow-800 border border-yellow-200/50',
                    info: 'bg-cyan-500/10 backdrop-blur-md text-cyan-800 border border-cyan-200/50',
                }[color] || 'bg-blue-500/10 backdrop-blur-md text-blue-700 border border-blue-200/50';
            case 'gradient':
                return {
                    primary: 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-500/30',
                    secondary: 'bg-gradient-to-br from-gray-700 to-gray-900 text-white shadow-md shadow-gray-900/30',
                    success: 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md shadow-green-500/30',
                    danger: 'bg-gradient-to-br from-red-500 to-rose-600 text-white shadow-md shadow-red-500/30',
                    warning: 'bg-gradient-to-br from-yellow-400 to-orange-500 text-white shadow-md shadow-yellow-500/30',
                    info: 'bg-gradient-to-br from-cyan-400 to-blue-500 text-white shadow-md shadow-cyan-500/30',
                }[color] || 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white';
            default:
                // By default use a soft pastel logic similar to old implementation
                return {
                    primary: 'bg-blue-100 text-blue-800',
                    secondary: 'bg-gray-100 text-gray-800',
                    success: 'bg-green-100 text-green-800',
                    danger: 'bg-red-100 text-red-800',
                    warning: 'bg-yellow-100 text-yellow-800',
                    info: 'bg-indigo-100 text-indigo-800',
                }[color] || 'bg-blue-100 text-blue-800';
        }
    };
    const sizeClasses = {
        xs: 'px-1.5 py-0.5 text-[10px]',
        sm: 'px-2 py-0.5 text-xs',
        md: 'px-2.5 py-1 text-sm',
        lg: 'px-3 py-1 text-base',
        xl: 'px-4 py-1.5 text-lg',
        '2xl': 'px-5 py-2 text-xl',
        full: 'px-6 py-3 text-2xl',
    };
    return (React.createElement(framerMotion.motion.span, { className: `inline-flex items-center justify-center font-medium ${sizeClasses[size] || sizeClasses.md} ${getRadiusClasses()} ${getVariantClasses()} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", ...rest }, children));
};

const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = 'primary', ...rest }) => {
    // Color classes for breadcrumb
    const colorClasses = {
        primary: 'text-blue-600 hover:text-blue-800 hover:bg-blue-50 focus-visible:ring-blue-500/50',
        secondary: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-500/50',
        success: 'text-green-600 hover:text-green-800 hover:bg-green-50 focus-visible:ring-green-500/50',
        danger: 'text-red-600 hover:text-red-800 hover:bg-red-50 focus-visible:ring-red-500/50',
        warning: 'text-yellow-600 hover:text-yellow-800 hover:bg-yellow-50 focus-visible:ring-yellow-500/50',
        info: 'text-cyan-600 hover:text-cyan-800 hover:bg-cyan-50 focus-visible:ring-cyan-500/50',
    };
    const appliedClass = colorClasses[color] || colorClasses.primary;
    return (React.createElement(framerMotion.motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", ...rest },
        React.createElement("ol", { className: "inline-flex items-center space-x-1 sm:space-x-2" }, items.map((item, index) => {
            const isLast = index === items.length - 1;
            return (React.createElement("li", { key: index, className: "inline-flex items-center group" },
                index > 0 && (React.createElement("svg", { className: "w-4 h-4 text-gray-400 mx-1 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
                    React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }))),
                React.createElement("a", { href: isLast ? undefined : item.href, "aria-current": isLast ? 'page' : undefined, className: `inline-flex items-center px-2 py-1 text-sm font-medium rounded-md transition-all duration-200 outline-none focus-visible:ring-2 ${isLast
                        ? 'text-gray-500 cursor-default'
                        : `${appliedClass} active:scale-95`}` }, item.label)));
        }))));
};

const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', radius = 'xl', customVariants, customTransition, 
// Standard Framer Motion props
whileHover, whileTap, whileFocus, 
// Additional animation props
whileHoverAnimation, whileTapAnimation, whileFocusAnimation, customHoverAnimation, customTapAnimation, customFocusAnimation, 
// Styling customization
stateClasses = {}, customClasses = {}, customSizeClasses, baseClassName, unstyled = false, useAnimation = true, type = 'button', loading = false, leftIcon, rightIcon, fullWidth = false, ...rest }) => {
    // Default base classes if not unstyled and no custom base class provided
    const defaultBaseClasses = 'font-medium transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2';
    // Use either provided base class, default base class, or none if unstyled
    const baseClasses = unstyled ? '' : (baseClassName || defaultBaseClasses);
    // Default color classes for different variants
    const defaultColorClasses = {
        primary: {
            solid: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-lg shadow-blue-500/20 active:scale-95',
            outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500 active:scale-95',
            ghost: 'text-blue-600 hover:bg-blue-50/80 focus:ring-blue-500 active:scale-95',
            glass: 'bg-blue-500/10 backdrop-blur-md text-blue-700 border border-blue-200/50 hover:bg-blue-500/20 focus:ring-blue-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:from-blue-700 hover:to-indigo-700 focus:ring-blue-500 shadow-lg shadow-blue-500/30 active:scale-95',
        },
        secondary: {
            solid: 'bg-gray-800 text-white hover:bg-gray-900 focus:ring-gray-700 shadow-lg shadow-gray-900/20 active:scale-95',
            outline: 'border-2 border-gray-600 text-gray-800 hover:bg-gray-50 focus:ring-gray-600 active:scale-95',
            ghost: 'text-gray-700 hover:bg-gray-100/80 focus:ring-gray-600 active:scale-95',
            glass: 'bg-gray-500/10 backdrop-blur-md text-gray-800 border border-gray-200/50 hover:bg-gray-500/20 focus:ring-gray-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-r from-gray-700 to-gray-900 text-white hover:from-gray-800 hover:to-black focus:ring-gray-700 shadow-lg shadow-gray-900/30 active:scale-95',
        },
        success: {
            solid: 'bg-green-500 text-white hover:bg-green-600 focus:ring-green-400 shadow-lg shadow-green-500/20 active:scale-95',
            outline: 'border-2 border-green-500 text-green-600 hover:bg-green-50 focus:ring-green-400 active:scale-95',
            ghost: 'text-green-600 hover:bg-green-50/80 focus:ring-green-400 active:scale-95',
            glass: 'bg-green-500/10 backdrop-blur-md text-green-800 border border-green-200/50 hover:bg-green-500/20 focus:ring-green-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-r from-green-500 to-emerald-600 text-white hover:from-green-600 hover:to-emerald-700 focus:ring-green-400 shadow-lg shadow-green-500/30 active:scale-95',
        },
        danger: {
            solid: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-400 shadow-lg shadow-red-500/20 active:scale-95',
            outline: 'border-2 border-red-500 text-red-600 hover:bg-red-50 focus:ring-red-400 active:scale-95',
            ghost: 'text-red-600 hover:bg-red-50/80 focus:ring-red-400 active:scale-95',
            glass: 'bg-red-500/10 backdrop-blur-md text-red-800 border border-red-200/50 hover:bg-red-500/20 focus:ring-red-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-r from-red-500 to-rose-600 text-white hover:from-red-600 hover:to-rose-700 focus:ring-red-400 shadow-lg shadow-red-500/30 active:scale-95',
        },
        warning: {
            solid: 'bg-yellow-400 text-gray-900 hover:bg-yellow-500 focus:ring-yellow-400 shadow-lg shadow-yellow-400/20 active:scale-95',
            outline: 'border-2 border-yellow-400 text-yellow-600 hover:bg-yellow-50 focus:ring-yellow-400 active:scale-95',
            ghost: 'text-yellow-600 hover:bg-yellow-50/80 focus:ring-yellow-400 active:scale-95',
            glass: 'bg-yellow-500/10 backdrop-blur-md text-yellow-800 border border-yellow-200/50 hover:bg-yellow-500/20 focus:ring-yellow-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white hover:from-yellow-500 hover:to-orange-600 focus:ring-yellow-400 shadow-lg shadow-yellow-500/30 active:scale-95',
        },
        info: {
            solid: 'bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-400 shadow-lg shadow-cyan-500/20 active:scale-95',
            outline: 'border-2 border-cyan-500 text-cyan-600 hover:bg-cyan-50 focus:ring-cyan-400 active:scale-95',
            ghost: 'text-cyan-600 hover:bg-cyan-50/80 focus:ring-cyan-400 active:scale-95',
            glass: 'bg-cyan-500/10 backdrop-blur-md text-cyan-800 border border-cyan-200/50 hover:bg-cyan-500/20 focus:ring-cyan-400 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:from-cyan-500 hover:to-blue-600 focus:ring-cyan-400 shadow-lg shadow-cyan-500/30 active:scale-95',
        },
    };
    // Default size classes
    const defaultSizeClasses = {
        xs: 'px-2 py-1 text-xs',
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-sm md:text-base',
        lg: 'px-5 py-2.5 text-base md:text-lg',
        xl: 'px-6 py-3 text-lg md:text-xl',
        '2xl': 'px-8 py-4 text-xl md:text-2xl',
        full: 'w-full px-4 py-2 text-base md:text-lg',
    };
    const getRadiusClasses = () => {
        if (unstyled)
            return '';
        switch (radius) {
            case 'none': return 'rounded-none';
            case 'sm': return 'rounded-sm';
            case 'md': return 'rounded-md';
            case 'lg': return 'rounded-lg';
            case 'xl': return 'rounded-xl';
            case '2xl': return 'rounded-2xl';
            case 'full': return 'rounded-full';
            default: return `rounded-${radius}`;
        }
    };
    // Determine the appropriate color classes
    const getColorClasses = () => {
        if (unstyled)
            return '';
        // Check if custom classes are provided for this variant and color combination
        if (customClasses?.[variant]?.[color]) {
            return customClasses[variant][color];
        }
        // If we have a predefined color class for this variant and color
        if (defaultColorClasses[color]?.[variant]) {
            return defaultColorClasses[color][variant];
        }
        // Fallback to primary if the combination doesn't exist
        return defaultColorClasses.primary[variant] || '';
    };
    // Determine the appropriate size classes
    const getSizeClasses = () => {
        if (unstyled)
            return '';
        // Use custom size classes if provided, otherwise default
        const sizeClassMap = customSizeClasses || defaultSizeClasses;
        return sizeClassMap[size] || defaultSizeClasses.md;
    };
    // Determine state-specific classes
    const getStateClasses = () => {
        if (unstyled)
            return '';
        return disabled && stateClasses.disabled ? stateClasses.disabled : '';
    };
    // Compute all classes
    const computedClasses = `
    ${baseClasses}
    ${getColorClasses()}
    ${getSizeClasses()}
    ${getRadiusClasses()}
    ${getStateClasses()}
    ${fullWidth ? 'w-full flex' : 'inline-flex'}
    ${loading ? 'opacity-75 cursor-wait' : ''}
    ${className}
  `.trim().replace(/\s+/g, ' ');
    // Compute animation variants and states
    const variants = customVariants || (useAnimation ? motionVariants[motionVariant] || {} : {});
    // Compute hover animation
    const computedWhileHover = customHoverAnimation ||
        (whileHoverAnimation ? getVariantVisible(whileHoverAnimation) : { y: -2, scale: 1.02 });
    // Compute tap animation
    const computedWhileTap = customTapAnimation ||
        (whileTapAnimation ? getVariantVisible(whileTapAnimation) : { scale: 0.98 });
    // Compute focus animation
    const computedWhileFocus = customFocusAnimation ||
        (whileFocusAnimation ? getVariantVisible(whileFocusAnimation) : whileFocus);
    const isDisabled = disabled || loading;
    return (React.createElement(framerMotion.motion.button, { className: computedClasses, onClick: onClick, disabled: isDisabled, type: type, variants: variants, initial: useAnimation ? "hidden" : false, animate: useAnimation ? "visible" : false, transition: customTransition, whileHover: isDisabled ? undefined : computedWhileHover, whileTap: isDisabled ? undefined : computedWhileTap, whileFocus: computedWhileFocus, "aria-busy": loading, ...rest },
        loading && (React.createElement("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 inline-block", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" },
            React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
            React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }))),
        leftIcon && React.createElement("span", { className: "mr-2 inline-flex items-center" }, leftIcon),
        children,
        rightIcon && React.createElement("span", { className: "ml-2 inline-flex items-center" }, rightIcon)));
};

const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', radius = 'full', whileHover, whileTap, whileFocus, whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
    const baseClasses = disabled
        ? 'inline-flex items-center justify-center transition-all duration-300 ease-out focus:outline-none opacity-50 cursor-not-allowed'
        : 'inline-flex items-center justify-center transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2';
    const colorClasses = {
        primary: {
            solid: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-lg shadow-blue-500/20 active:scale-95',
            outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500 active:scale-95',
            ghost: 'text-blue-600 hover:bg-blue-50/80 focus:ring-blue-500 active:scale-95',
            glass: 'bg-blue-500/10 backdrop-blur-md text-blue-700 border border-blue-200/50 hover:bg-blue-500/20 focus:ring-blue-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white hover:from-blue-700 hover:to-indigo-700 focus:ring-blue-500 shadow-lg shadow-blue-500/30 active:scale-95',
        },
        secondary: {
            solid: 'bg-gray-800 text-white hover:bg-gray-900 focus:ring-gray-700 shadow-lg shadow-gray-900/20 active:scale-95',
            outline: 'border-2 border-gray-600 text-gray-800 hover:bg-gray-50 focus:ring-gray-600 active:scale-95',
            ghost: 'text-gray-700 hover:bg-gray-100/80 focus:ring-gray-600 active:scale-95',
            glass: 'bg-gray-500/10 backdrop-blur-md text-gray-800 border border-gray-200/50 hover:bg-gray-500/20 focus:ring-gray-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-br from-gray-700 to-gray-900 text-white hover:from-gray-800 hover:to-black focus:ring-gray-700 shadow-lg shadow-gray-900/30 active:scale-95',
        },
        success: {
            solid: 'bg-green-500 text-white hover:bg-green-600 focus:ring-green-400 shadow-lg shadow-green-500/20 active:scale-95',
            outline: 'border-2 border-green-500 text-green-600 hover:bg-green-50 focus:ring-green-400 active:scale-95',
            ghost: 'text-green-600 hover:bg-green-50/80 focus:ring-green-400 active:scale-95',
            glass: 'bg-green-500/10 backdrop-blur-md text-green-800 border border-green-200/50 hover:bg-green-500/20 focus:ring-green-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-br from-green-500 to-emerald-600 text-white hover:from-green-600 hover:to-emerald-700 focus:ring-green-400 shadow-lg shadow-green-500/30 active:scale-95',
        },
        danger: {
            solid: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-400 shadow-lg shadow-red-500/20 active:scale-95',
            outline: 'border-2 border-red-500 text-red-600 hover:bg-red-50 focus:ring-red-400 active:scale-95',
            ghost: 'text-red-600 hover:bg-red-50/80 focus:ring-red-400 active:scale-95',
            glass: 'bg-red-500/10 backdrop-blur-md text-red-800 border border-red-200/50 hover:bg-red-500/20 focus:ring-red-500 shadow-sm active:scale-95',
            gradient: 'bg-gradient-to-br from-red-500 to-rose-