my-animated-components
Version:
A comprehensive React component library with built-in animations and customization options.  
995 lines (962 loc) • 75.3 kB
JavaScript
'use strict';
var React = require('react');
var framerMotion = require('framer-motion');
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 Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn',
// Standard Framer Motion props
whileHover, whileTap, whileFocus,
// Additional ease animation props
whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
const baseClasses = 'font-medium rounded-md 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',
outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
},
secondary: {
solid: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
outline: 'border border-gray-600 text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
ghost: 'text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
},
success: {
solid: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
outline: 'border border-green-600 text-green-600 hover:bg-green-50 focus:ring-green-500',
ghost: 'text-green-600 hover:bg-green-50 focus:ring-green-500',
},
danger: {
solid: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
outline: 'border border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500',
ghost: 'text-red-600 hover:bg-red-50 focus:ring-red-500',
},
warning: {
solid: 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
outline: 'border border-yellow-500 text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
ghost: 'text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
},
info: {
solid: 'bg-blue-400 text-white hover:bg-blue-500 focus:ring-blue-300',
outline: 'border border-blue-400 text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
ghost: 'text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
},
};
const sizeClasses = {
xs: 'px-2.5 py-1.5 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-4 py-2 text-lg',
xl: 'px-6 py-3 text-xl',
};
const computedWhileHover = whileHoverAnimation
? getVariantVisible(whileHoverAnimation)
: whileHover;
const computedWhileTap = whileTapAnimation
? getVariantVisible(whileTapAnimation)
: whileTap;
const computedWhileFocus = whileFocusAnimation
? getVariantVisible(whileFocusAnimation)
: whileFocus;
return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, children));
};
const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', whileHover, whileTap, whileFocus, whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
const baseClasses = 'rounded-full 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',
outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
},
secondary: {
solid: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
outline: 'border border-gray-600 text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
ghost: 'text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
},
success: {
solid: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
outline: 'border border-green-600 text-green-600 hover:bg-green-50 focus:ring-green-500',
ghost: 'text-green-600 hover:bg-green-50 focus:ring-green-500',
},
danger: {
solid: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
outline: 'border border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500',
ghost: 'text-red-600 hover:bg-red-50 focus:ring-red-500',
},
warning: {
solid: 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
outline: 'border border-yellow-500 text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
ghost: 'text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
},
info: {
solid: 'bg-blue-400 text-white hover:bg-blue-500 focus:ring-blue-300',
outline: 'border border-blue-400 text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
ghost: 'text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
},
};
const sizeClasses = {
xs: 'p-1',
sm: 'p-1.5',
md: 'p-2',
lg: 'p-2.5',
xl: 'p-3',
};
const computedWhileHover = whileHoverAnimation
? getVariantVisible(whileHoverAnimation)
: whileHover;
const computedWhileTap = whileTapAnimation
? getVariantVisible(whileTapAnimation)
: whileTap;
const computedWhileFocus = whileFocusAnimation
? getVariantVisible(whileFocusAnimation)
: whileFocus;
return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, icon));
};
const Accordion = ({ className = '', items, color = 'primary', variant = 'solid', 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-100 border border-blue-400 text-blue-900 hover:bg-blue-200 focus:ring-blue-500',
outline: 'border border-blue-400 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
},
secondary: {
solid: 'bg-gray-100 border border-gray-400 text-gray-900 hover:bg-gray-200 focus:ring-gray-500',
outline: 'border border-gray-400 text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
ghost: 'text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
},
danger: {
solid: 'bg-red-100 border border-red-400 text-red-900 hover:bg-red-200 focus:ring-red-500',
outline: 'border border-red-400 text-red-600 hover:bg-red-50 focus:ring-red-500',
ghost: 'text-red-600 hover:bg-red-50 focus:ring-red-500',
},
success: {
solid: 'bg-green-100 border border-green-400 text-green-900 hover:bg-green-200 focus:ring-green-500',
outline: 'border border-green-400 text-green-600 hover:bg-green-50 focus:ring-green-500',
ghost: 'text-green-600 hover:bg-green-50 focus:ring-green-500',
},
info: {
solid: 'bg-blue-100 border border-blue-400 text-blue-900 hover:bg-blue-200 focus:ring-blue-400',
outline: 'border border-blue-400 text-blue-600 hover:bg-blue-50 focus:ring-blue-400',
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-400',
},
warning: {
solid: 'bg-yellow-100 border border-yellow-400 text-yellow-900 hover:bg-yellow-200 focus:ring-yellow-500',
outline: 'border border-yellow-400 text-yellow-600 hover:bg-yellow-50 focus:ring-yellow-500',
ghost: 'text-yellow-600 hover:bg-yellow-50 focus:ring-yellow-500',
},
};
const variantClasses = colorStyles[color][variant];
return (React.createElement("div", { className: `space-y-2 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `rounded-md focus:outline-none ${variantClasses} ${wrapperClassName}` },
React.createElement("button", { disabled: item.disabled, className: `w-full flex justify-between items-center px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses} ${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, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", className: `px-4 py-2 border-t ${contentClassName}`, ...rest }, item.content))))))));
};
const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn', }) => {
const colorClasses = {
primary: 'bg-blue-100 text-blue-700',
secondary: 'bg-gray-100 text-gray-700',
success: 'bg-green-100 text-green-700',
danger: 'bg-red-100 text-red-700',
warning: 'bg-yellow-100 text-yellow-700',
info: 'bg-indigo-100 text-indigo-700',
};
return (React.createElement(framerMotion.motion.div, { className: `p-4 rounded-md ${colorClasses[color]} ${className}`, role: "alert", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
React.createElement("div", { className: "flex" },
React.createElement("div", { className: "flex-grow" }, children),
onClose && (React.createElement("button", { type: "button", className: "ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 inline-flex h-8 w-8", onClick: onClose, "aria-label": "Close" },
React.createElement("span", { className: "sr-only" }, "Close"),
React.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })))))));
};
const Avatar = ({ className = '', size = 'md', src, alt, initials }) => {
const sizeClasses = {
xs: 'w-6 h-6 text-xs',
sm: 'w-8 h-8 text-sm',
md: 'w-10 h-10 text-base',
lg: 'w-12 h-12 text-lg',
xl: 'w-14 h-14 text-xl',
};
return (React.createElement("div", { className: `relative inline-flex items-center justify-center ${sizeClasses[size]} ${className} rounded-full bg-gray-200 overflow-hidden` }, src ? (React.createElement("img", { src: src, alt: alt || 'Avatar', className: "w-full h-full object-cover" })) : (React.createElement("span", { className: "font-medium text-gray-600" }, initials))));
};
const Badge = ({ children, className = '', color = 'primary', size = 'md', motionVariant = 'fadeIn', // Default motion variant
}) => {
// Define the colors
const colorStyles = {
primary: '#E0F7FA', // bg-blue-100
secondary: '#F1F1F1', // bg-gray-100
success: '#E8F5E9', // bg-green-100
danger: '#FFEBEE', // bg-red-100
warning: '#FFFDE7', // bg-yellow-100
info: '#E8EAF6', // bg-indigo-100
};
const textColor = {
primary: '#00796B', // text-blue-800
secondary: '#757575', // text-gray-800
success: '#388E3C', // text-green-800
danger: '#C62828', // text-red-800
warning: '#FBC02D', // text-yellow-800
info: '#1976D2', // text-indigo-800
};
// Define the sizes
const sizeStyles = {
xs: { padding: '0.125rem 0.5rem', fontSize: '0.75rem' },
sm: { padding: '0.25rem 0.75rem', fontSize: '0.875rem' },
md: { padding: '0.375rem 1rem', fontSize: '1rem' },
lg: { padding: '0.5rem 1.25rem', fontSize: '1.125rem' },
xl: { padding: '0.625rem 1.5rem', fontSize: '1.25rem' },
};
// Generate custom styles dynamically
const customStyle = {
backgroundColor: colorStyles[color] || colorStyles.primary,
color: textColor[color] || textColor.primary,
padding: sizeStyles[size].padding,
fontSize: sizeStyles[size].fontSize,
};
return (React.createElement(framerMotion.motion.span, { className: `inline-flex items-center font-medium rounded-full ${className}`, style: customStyle, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
};
const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = 'primary' }) => {
// Color classes for breadcrumb
const colorClasses = {
primary: 'text-blue-600 hover:text-blue-800',
secondary: 'text-gray-600 hover:text-gray-800',
success: 'text-green-600 hover:text-green-800',
danger: 'text-red-600 hover:text-red-800',
warning: 'text-yellow-600 hover:text-yellow-800',
info: 'text-blue-400 hover:text-blue-500',
};
return (React.createElement(framerMotion.motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
React.createElement("ol", { className: "inline-flex items-center space-x-1 md:space-x-3" }, items.map((item, index) => (React.createElement("li", { key: index, className: "inline-flex items-center" },
index > 0 && (React.createElement("svg", { className: "w-6 h-6 text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }))),
React.createElement("a", { href: item.href, className: `ml-1 text-sm font-medium ${index === items.length - 1 ? 'text-gray-500 hover:text-gray-700' : colorClasses[color]}` }, item.label)))))));
};
const Card = ({ children, className = '', motionVariant = 'fadeIn' }) => {
return (React.createElement(framerMotion.motion.div, { className: `bg-white shadow rounded-lg overflow-hidden ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
};
const CardBody = ({ children, className = '', motionVariant = 'fadeIn' }) => {
return (React.createElement(framerMotion.motion.div, { className: `px-4 py-5 sm:p-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
};
const CardFooter = ({ children, className = '', motionVariant = 'fadeIn' }) => {
return (React.createElement(framerMotion.motion.div, { className: `px-4 py-4 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
};
const CardHeader = ({ children, className = '', motionVariant = 'fadeIn' }) => {
return (React.createElement(framerMotion.motion.div, { className: `px-4 py-5 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
};
const Dropdown = ({ children, className = '', trigger, motionVariant = 'fadeIn' }) => {
const [isOpen, setIsOpen] = React.useState(false);
const dropdownRef = React.useRef(null);
React.useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (React.createElement("div", { className: `relative inline-block text-left ${className}`, ref: dropdownRef },
React.createElement("div", null,
React.createElement("button", { type: "button", onClick: () => setIsOpen(prev => !prev) }, trigger),
React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement(framerMotion.motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children))))));
};
const DropdownItem = ({ children, className = '' }) => {
return (React.createElement("a", { href: "#", className: `block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${className}`, role: "menuitem" }, children));
};
const Checkbox = ({ className = '', label, checked, onChange, color = 'primary', motionVariant = 'fadeIn', }) => {
const colorClasses = {
primary: 'text-blue-600 focus:ring-blue-500 hover:text-blue-700',
secondary: 'text-gray-600 focus:ring-gray-500 hover:text-gray-700',
success: 'text-green-600 focus:ring-green-500 hover:text-green-700',
danger: 'text-red-600 focus:ring-red-500 hover:text-red-700',
warning: 'text-yellow-500 focus:ring-yellow-400 hover:text-yellow-600',
info: 'text-blue-400 focus:ring-blue-300 hover:text-blue-500',
};
return (React.createElement(framerMotion.motion.label, { className: `inline-flex items-center cursor-pointer select-none ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
React.createElement("input", { type: "checkbox", className: `form-checkbox h-5 w-5 rounded focus:ring-2 ${colorClasses[color]}`, checked: checked, onChange: onChange }),
React.createElement("span", { className: `ml-2 font-medium ${colorClasses[color]}` }, label)));
};
const FileUpload = ({ className = '', onChange, accept, multiple, buttonColor = 'primary', // Default button color
motionVariant = 'fadeIn', // Default motion variant
}) => {
const fileInputRef = React.useRef(null);
const handleClick = () => {
fileInputRef.current?.click();
};
const handleChange = (event) => {
const file = event.target.files?.[0] || null;
onChange(file);
};
const buttonColorClasses = {
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
success: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
warning: 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
info: 'bg-blue-400 text-white hover:bg-blue-500 focus:ring-blue-300',
};
return (React.createElement(framerMotion.motion.div, { className: `flex items-center ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
React.createElement("button", { type: "button", onClick: handleClick, className: `px-4 py-2 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 ${buttonColorClasses[buttonColor]}` }, "Choose File"),
React.createElement("input", { type: "file", ref: fileInputRef, onChange: handleChange, accept: accept, multiple: multiple, className: "hidden" })));
};
const Input = ({ className = '', size = 'md', type = 'text', placeholder, value, onChange, color = 'primary', textColor = 'black', }) => {
const sizeClasses = {
xs: 'px-2 py-1 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-4 py-3 text-lg',
xl: 'px-5 py-4 text-xl',
};
const colorClasses = {
primary: 'border-blue-300 focus:ring-blue-500 focus:border-blue-500',
secondary: 'border-gray-300 focus:ring-gray-500 focus:border-gray-500',
success: 'border-green-300 focus:ring-green-500 focus:border-green-500',
danger: 'border-red-300 focus:ring-red-500 focus:border-red-500',
warning: 'border-yellow-300 focus:ring-yellow-500 focus:border-yellow-500',
info: 'border-blue-400 focus:ring-blue-500 focus:border-blue-500',
};
const textColorClasses = {
black: 'text-black',
gray: 'text-gray-700',
white: 'text-white',
blue: 'text-blue-600',
green: 'text-green-600',
red: 'text-red-600',
};
return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
React.createElement("input", { type: type, className: `w-full rounded-md ${sizeClasses[size]} ${colorClasses[color]} ${textColorClasses[textColor]} ${className} focus:outline-none focus:ring-2`, placeholder: placeholder, value: value, onChange: onChange })));
};
const Radio = ({ className = '', label, name, value, checked, onChange, color = 'primary', size = 'md', motionVariant = 'fadeIn', }) => {
const baseClasses = 'inline-flex items-center cursor-pointer';
// Dynamic color classes
const colorClasses = {
primary: 'text-blue-600 focus:ring-blue-500 checked:border-blue-600 hover:text-blue-700',
secondary: 'text-gray-600 focus:ring-gray-500 checked:border-gray-600 hover:text-gray-700',
success: 'text-green-600 focus:ring-green-500 checked:border-green-600 hover:text-green-700',
danger: 'text-red-600 focus:ring-red-500 checked:border-red-600 hover:text-red-700',
warning: 'text-yellow-500 focus:ring-yellow-400 checked:border-yellow-500 hover:text-yellow-600',
info: 'text-blue-400 focus:ring-blue-300 checked:border-blue-400 hover:text-blue-500',
};
// Dynamic size classes
const sizeClasses = {
xs: 'h-4 w-4',
sm: 'h-5 w-5',
md: 'h-6 w-6',
lg: 'h-7 w-7',
xl: 'h-8 w-8',
};
return (React.createElement(framerMotion.motion.label, { className: `${baseClasses} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
React.createElement("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, className: `form-radio rounded-full border-2 focus:ring-2 ${colorClasses[color]} ${sizeClasses[size]}` }),
React.createElement("span", { className: `ml-2 font-medium ${colorClasses[color]}` }, label)));
};
const Select = ({ className = '', size = 'md', options, value, onChange, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
}) => {
const baseClasses = 'w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
const colorClasses = {
primary: 'border-blue-600 focus:ring-blue-500 text-blue-600',
secondary: 'border-gray-600 focus:ring-gray-500 text-gray-600',
success: 'border-green-600 focus:ring-green-500 text-green-600',
danger: 'border-red-600 focus:ring-red-500 text-red-600',
warning: 'border-yellow-500 focus:ring-yellow-400 text-yellow-500',
info: 'border-blue-400 focus:ring-blue-300 text-blue-400',
};
const sizeClasses = {
xs: 'px-2 py-1 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-4 py-3 text-lg',
xl: 'px-5 py-4 text-xl',
};
return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
React.createElement("select", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, value: value, onChange: onChange }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))));
};
const Switch = ({ className = '', checked, onChange, label, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
}) => {
const baseClasses = 'inline-flex items-center cursor-pointer';
const colorClasses = {
primary: 'bg-blue-600',
secondary: 'bg-gray-600',
success: 'bg-green-600',
danger: 'bg-red-600',
warning: 'bg-yellow-500',
info: 'bg-blue-400',
};
return (React.createElement(framerMotion.motion.label, { className: `${baseClasses} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
React.createElement("div", { className: "relative" },
React.createElement("input", { type: "checkbox", className: "sr-only", checked: checked, onChange: (e) => onChange(e.target.checked) }),
React.createElement("div", { className: `w-10 h-6 bg-gray-200 rounded-full shadow-inner ${checked ? colorClasses[color] : ''}` }),
React.createElement("div", { className: `absolute w-4 h-4 bg-white rounded-full shadow inset-y-1 left-1 transition-transform duration-200 ease-in-out ${checked ? 'transform translate-x-4' : ''}` })),
label && React.createElement("span", { className: "ml-3 text-sm font-medium text-gray-900" }, label)));
};
const Textarea = ({ className = '', size = 'md', placeholder, value, onChange, rows = 4, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
}) => {
const baseClasses = 'w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
const colorClasses = {
primary: 'focus:ring-blue-500 focus:border-blue-500',
secondary: 'focus:ring-gray-500 focus:border-gray-500',
success: 'focus:ring-green-500 focus:border-green-500',
danger: 'focus:ring-red-500 focus:border-red-500',
warning: 'focus:ring-yellow-400 focus:border-yellow-400',
info: 'focus:ring-blue-300 focus:border-blue-300',
};
const sizeClasses = {
xs: 'px-2 py-1 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-base',
lg: 'px-4 py-3 text-lg',
xl: 'px-5 py-4 text-xl',
};
return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
React.createElement("textarea", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange, rows: rows })));
};
const Container = ({ children, className = '', fluid = false, motionVariant = 'fadeIn' }) => {
const containerClass = fluid ? 'w-full' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8';
return (React.createElement(framerMotion.motion.div, { className: `${containerClass} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden" }, children));
};
const Flex = ({ children, className = '', direction = 'row', justify = 'start', align = 'start', wrap = false, }) => {
const flexClass = `
flex
${direction === 'col' ? 'flex-col' : 'flex-row'}
${`justify-${justify}`}
${`items-${align}`}
${wrap ? 'flex-wrap' : 'flex-nowrap'}
`;
return (React.createElement("div", { className: `${flexClass} ${className}` }, children));
};
const Grid = ({ children, className = '', cols = 3, gap = 4 }) => {
return (React.createElement("div", { className: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${cols} gap-${gap} ${className}` }, children));
};
const List = ({ children, className = '', as = 'ul' }) => {
const Tag = as;
return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } },
React.createElement(Tag, { className: `space-y-1 ${className}` }, children)));
};
const ListItem = ({ children, className = '' }) => {
return (React.createElement(framerMotion.motion.li, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
};
const Modal = ({ children, className = '', isOpen, onClose, motionVariant = 'bounce' }) => {
return (React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement(framerMotion.motion.div, { className: "fixed inset-0 z-50 overflow-y-auto", variants: motionVariants[motionVariant] },
React.createElement("div", { className: "flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" },
React.createElement("div", { className: "fixed inset-0 transition-opacity", "aria-hidden": "true" },
React.createElement("div", { className: "absolute inset-0 bg-black opacity-45", onClick: onClose })),
React.createElement("span", { className: "hidden sm:inline-block sm:align-middle sm:h-screen", "aria-hidden": "true" }, "\u200B"),
React.createElement(framerMotion.motion.div, { className: `inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full max-w-lg ${className}` }, children))))));
};
const ModalBody = ({ children, className = '' }) => {
return (React.createElement("div", { className: `px-4 pt-5 pb-4 sm:p-6 sm:pb-4 ${className}` }, children));
};
const ModalFooter = ({ children, className = '' }) => {
return (React.createElement("div", { className: `px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse ${className}` }, children));
};
const ModalHeader = ({ children, className = '' }) => {
return (React.createElement("div", { className: `px-4 pt-5 pb-4 sm:p-6 sm:pb-4 ${className}` },
React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900" }, children)));
};
const NavItem = ({ children, className = '', href, active = false, size = 'md', motionVariant = 'fadeIn', }) => {
const activeClass = active ? 'text-gray-900 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700';
const sizeClasses = {
xs: 'text-xs px-1 py-0.5',
sm: 'text-sm px-2 py-1',
md: 'text-base px-3 py-2',
lg: 'text-lg px-4 py-3',
xl: 'text-xl px-5 py-4',
};
return (React.createElement(framerMotion.motion.a, { href: href, className: `inline-flex items-center ${sizeClasses[size]} ${activeClass} ${className}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, children));
};
const Navbar = ({ children, className = '', brand }) => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
return (React.createElement(framerMotion.motion.nav, { className: `bg-white shadow ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" },
React.createElement("div", { className: "flex justify-between h-16" },
Re