my-animated-components
Version:
A comprehensive React component library with built-in animations and customization options.  
1,403 lines • 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" },
React.createElement("div", { className: "flex-shrink-0 flex items-center" }, brand),
React.createElement("div", { className: "hidden md:flex items-center space-x-4" }, children),
React.createElement("div", { className: "flex md:hidden items-center" },
React.createElement("button", { type: "button", className: "text-gray-800 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400", onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen) }, isMobileMenuOpen ? (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }))) : (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16M4 18h16" }))))))),
isMobileMenuOpen && (React.createElement("div", { className: "md:hidden bg-white shadow-md" },
React.createElement("div", { className: "space-y-2 px-4 py-2" }, React.Children.map(children, (child) => (React.createElement("div", { className: "text-gray-800 hover:text-gray-600" }, child))))))));
};
const Offcanvas = ({ children, className = '', isOpen, onClose, position = 'left' }) => {
const positionClasses = {
left: 'left-0 top-0 h-full',
right: 'right-0 top-0 h-full',
top: 'top-0 left-0 w-full',
bottom: 'bottom-0 left-0 w-full',
};
const variants = {
left: { x: '-100%' },
right: { x: '100%' },
top: { y: '-100%' },
bottom: { y: '100%' },
};
return (React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement("div", { className: "fixed inset-0 z-50 overflow-hidden" },
React.createElement("div", { className: "absolute inset-0 overflow-hidden" },
React.createElement(framerMotion.motion.div, { className: "absolute inset-0 bg-opacity-75 transition-opacity", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose }),
React.createElement("section", { className: `absolute ${positionClasses[position]} max-w-md` },
React.createElement(framerMotion.motion.div, { className: `h-full w-full transform transition ease-in-out duration-300 ${className}`, initial: variants[position], animate: { x: 0, y: 0 }, exit: variants[position], transition: { duration: 0.3 } },
React.createElement("div", { className: "h-full bg-white shadow-xl" }, children))))))));
};
const OffcanvasBody = ({ children, className = '' }) => {
return (React.createElement("div", { className: `p-4 overflow-y-auto ${className}` }, children));
};
const OffcanvasHeader = ({ children, className = '', onClose }) => {
return (React.createElement("div", { className: `px-4 py-3 border-b border-gray-200 flex items-center justify-between ${className}` },
React.createElement("h2", { className: "text-lg font-semibold" }, children),
React.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" },
React.createElement("span", { className: "sr-only" }, "Close panel"),
React.createElement("svg", { className: "h-6 w-6", 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 Pagination = ({ className = '', currentPage, totalPages, onPageChange, color = 'primary', motionVariant = 'fadeIn', whileHoverAnimation, whileTapAnimation, whileFocusAnimation, whileHover, whileTap, whileFocus, ...rest }) => {
const [windowWidth, setWindowWidth] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
const [visiblePages, setVisiblePages] = React.useState([]);
React.useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
React.useEffect(() => {
const generateVisiblePages = () => {
const maxMobilePages = 3;
const maxDesktopPages = 5;
const maxVisible = windowWidth < 768 ? maxMobilePages : maxDesktopPages;
if (totalPages <= maxVisible + 2)
return Array.from({ length: totalPages }, (_, i) => i + 1);
const startPage = Math.max(2, currentPage - Math.floor(maxVisible / 2));
const endPage = Math.min(totalPages - 1, currentPage + Math.floor(maxVisible / 2));
let pages = [1];
if (startPage > 2)
pages.push('...');
for (let i = startPage; i <= endPage; i++)
pages.push(i);
if (endPage < totalPages - 1)
pages.push('...');
pages.push(totalPages);
return pages;
};
setVisiblePages(generateVisiblePages());
}, [currentPage, totalPages, windowWidth]);
const colorClasses = {
primary: 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-blue-900 dark:hover:bg-blue-800',
secondary: 'text-gray-600 bg-gray-50 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600',
success: 'text-green-600 bg-green-50 hover:bg-green-100 hover:text-green-700 dark:bg-green-800 dark:hover:bg-green-700',
danger: 'text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700 dark:bg-red-800 dark:hover:bg-red-700',
warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700 dark:bg-yellow-800 dark:hover:bg-yellow-700',
info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700',
};
const computedWhileHover = whileHoverAnimation
? getVariantVisible(whileHoverAnimation)
: whileHover;
const computedWhileTap = whileTapAnimation
? getVariantVisible(whileTapAnimation)
: whileTap;
const computedWhileFocus = whileFocusAnimation
? getVariantVisible(whileFocusAnimation)
: whileFocus;
return (React.createElement(framerMotion.motion.nav, { className: `flex justify-center ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", ...rest },
React.createElement("div", { className: "w-full overflow-x-auto" },
React.createElement("ul", { className: "flex items-center -space-x-px h-10" },
React.createElement("li", { className: "flex-shrink-0" },
React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: `flex items-center px-3 py-2 sm:px-4 sm:py-2.5 text-sm sm:text-base
border border-gray-300 rounded-l-lg transition-colors duration-200
${colorClasses[color]}
${currentPage === 1 ? 'cursor-not-allowed opacity-50' : ''}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus },
React.createElement("span", { className: "hidden sm:inline" }, "Previous"),
React.createElement("span", { className: "sm:hidden" }, "Prev"))),
visiblePages.map((page, index) => (React.createElement("li", { key: `${page}-${index}`, className: "flex-shrink-0" }, page === '...' ? (React.createElement("span", { className: "px-3 py-2 text-gray-500 border border-gray-300 bg-white dark:bg-gray-800" }, "...")) : (React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(page), className: `min-w-[40px] px-2 py-1 sm:px-3 sm:py-2 text-sm sm:text-base
border border-gray-300 transition-colors duration-200
${currentPage === page
? 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100'
: 'bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700'}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus }, page))))),
React.createElement("li", { className: "flex-shrink-0" },
React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: `flex items-center px-3 py-2 sm:px-4 sm:py-2.5 text-sm sm:text-base
border border-gray-300 rounded-r-lg transition-colors duration-200
${colorClasses[color]}
${currentPage === totalPages ? 'cursor-not-allowed opacity-50' : ''}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus },
React.createElement("span", { className: "hidden sm:inline" }, "Next"),
React.createElement("span", { className: "sm:hidden" }, "Next")))))));
};
const ProgressBar = ({ className = '', color = 'primary', value, max = 100, motionVariant = 'fadeIn', // Default motion variant
}) => {
const percentage = Math.min(100, Math.max(0, (value / max) * 100));
const colorClasses = {
primary: 'bg-blue-600',
secondary: 'bg-gray-600',
success: 'bg-green-600',
danger: 'bg-red-600',
warning: 'bg-yellow-600',
info: 'bg-indigo-600',
};
return (React.createElement("div", { className: `w-full bg-gray-200 rounded-full h-2.5 ${className}` },
React.createElement(framerMotion.motion.div, { className: `h-2.5 rounded-full ${colorClasses[color]}`, style: { width: `${percentage}%` }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.5 }, variants: motionVariants[motionVariant], role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max })));
};
const Skeleton = ({ className = '', width = '100%', height = '20px', color = 'primary', motionVariant = 'fadeIn', // Default motion variant
}) => {
const colorClasses = {
primary: 'bg-blue-200',
secondary: 'bg-gray-300',
success: 'bg-green-200',
danger: 'bg-red-200',
warning: 'bg-yellow-200',
info: 'bg-indigo-200',
};
return (React.createElement(framerMotion.motion.div, { className: `animate-pulse rounded ${colorClasses[color]} ${className}`, style: { width, height }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }));
};
const Slider = ({ className = '', min, max, value, onChange, step = 1, color = 'primary', // Default color set to primary
motionVariant = 'fadeIn', // Default motion variant
}) => {
const percentage = ((value - min) / (max - min)) * 100;
const colorClasses = {
primary: 'bg-blue-600',
secondary: 'bg-gray-600',
success: 'bg-green-600',
danger: 'bg-red-600',
warning: 'bg-yellow-600',
info: 'bg-indigo-600',
};
return (React.createElement("div", { className: `relative w-full h-2 bg-gray-200 rounded-full ${className}` },
React.createElement(framerMotion.motion.div, { className: `absolute h-full ${colorClasses[color]} rounded-full`, style: { width: `${percentage}%` }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", transition: { duration: 0.3 } }),
React.createElement("input", { type: "range", min: min, max: max, value: value, onChange: (e) => onChange(Number(e.target.value)), step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" })));
};
const RangeSlider = ({ className = '', min, max, values, onChange, step = 1, color = 'primary', // Default color set to primary
motionVariant = 'fadeIn', // Default motion variant
}) => {
const [minValue, maxValue] = values;
const minPercentage = ((minValue - min) / (max - min)) * 100;
const maxPercentage = ((maxValue - min) / (max - min)) * 100;
const colorClasses = {
primary: 'bg-blue-600',
secondary: 'bg-gray-600',
success: 'bg-green-600',
danger: 'bg-red-600',
warning: 'bg-yellow-600',
info: 'bg-indigo-600',
};
const handleMinChange = (e) => {
const newMinValue = Math.min(Number(e.target.value), maxValue - step);
onChange([newMinValue, maxValue]);
};
const handleMaxChange = (e) => {
const newMaxValue = Math.max(Number(e.target.value), minValue + step);
onChange([minValue, newMaxValue]);
};
return (React.createElement("div", { className: `relative w-full h-2 bg-gray-200 rounded-full ${className}` },
React.createElement(framerMotion.motion.div, { className: `absolute h-full ${colorClasses[color]} rounded-full`, style: { left: `${minPercentage}%`, right: `${100 - maxPercentage}%` }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", transition: { duration: 0.3 } }),
React.createElement("input", { type: "range", min: min, max: max, value: minValue, onChange: handleMinChange, step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" }),
React.createElement("input", { type: "range", min: min, max: max, value: maxValue, onChange: handleMaxChange, step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" })));
};
const colorClasses = {
primary: { active: 'bg-blue-600 text-white', inactive: 'bg-blue-200 text-white', connector: 'bg-blue-200' },
secondary: { active: 'bg-gray-600 text-white', inactive: 'bg-gray-200 text-white', connector: 'bg-gray-200' },
success: { active: 'bg-green-600 text-white', inactive: 'bg-green-200 text-white', connector: 'bg-green-200' },
danger: { active: 'bg-red-600 text-white', inactive: 'bg-red-200 text-white', connector: 'bg-red-200' },
warning: { active: 'bg-yellow-500 text-black', inactive: 'bg-yellow-100 text-black', connector: 'bg-yellow-100' },
info: { active: 'bg-teal-500 text-white', inactive: 'bg-teal-200 text-white', connector: 'bg-teal-200' },
};
const Stepper = ({ className = '', steps, currentStep, color = {
active: 'primary',
inactive: 'primary',
connector: 'primary',
}, size = 'md', orientation = 'horizontal', }) => {
const sizeClasses = {
xs: 'w-5 h-5 text-xs',
sm: 'w-6 h-6 text-sm',
md: 'w-8 h-8 text-base',
lg: 'w-10 h-10 text-lg',
xl: 'w-12 h-12 text-xl',
};
const isVertical = orientation === 'vertical';
const activeColorClass = colorClasses[color.active || 'primary'].active;
const inactiveColorClass = colorClasses[color.inactive || 'primary'].inactive;
const connectorColorClass = colorClasses[color.connector || 'primary'].connector;
return (React.createElement("div", { className: `flex ${isVertical ? 'flex-col' : 'items-center'} ${className}` }, steps.map((step, index) => (React.createElement(React.Fragment, { key: index },
React.createElement("div", { className: `flex ${isVertical ? 'flex-col items-center' : 'items-center'}` },
React.createElement("div", { className: `flex items-center justify-center rounded-full ${index < currentStep
? activeColorClass
: index === currentStep
? `border-2 ${inactiveColorClass}`
: inactiveColorClass} ${sizeClasses[size]}` }, index < currentStep ? (React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" },
React.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }))) : (index + 1)),
index < steps.length - 1 && (React.createElement("div", { className: `flex-1 ${isVertical ? 'w-1 h-8' : 'h-1 mx-2'} ${index < currentStep ? activeColorClass : connectorColorClass}` }))),
React.createElement("div", { className: `${isVertical ? 'text-center mt-2 mb-4' : 'hidden sm:block text-xs text-center mx-2'}` }, step))))));
};
const Table = ({ children, className = '', motionVariant = 'fadeIn', // Default motion variant
color = 'primary', // Color customization
}) => {
const baseClasses = 'overflow-x-auto';
const colorClasses = {
primary: 'text-blue-600 border-blue-600 hover:bg-blue-100',
secondary: 'text-gray-600 border-gray-600 hover:bg-gray-100',
success: 'text-green-600 border-green-600 hover:bg-green-100',
danger: 'text-red-600 border-red-600 hover:bg-red-100',
warning: 'text-yellow-500 border-yellow-500 hover:bg-yellow-100',
info: 'text-blue-400 border-blue-400 hover:bg-blue-50',
};
return (React.createElement(framerMotion.motion.div, { className: `${baseClasses} ${colorClasses[color]} ${className}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
React.createElement("table", { className: "min-w-full divide-y divide-gray-200" }, children)));
};
const TableBody = ({ children, className = '' }) => {
return (React.createElement("tbody", { className: `bg-white divide-y divide-gray-200 ${className}` }, children));
};
const TableCell = ({ children, className = '', as = 'td' }) => {
const Tag = as;
const baseClass = as === 'th' ? 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' : 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
return (React.createElement(Tag, { className: `${baseClass} ${className}` }, children));
};
const TableHead = ({ children, className = '' }) => {
return (React.createElement("thead", { className: `bg-gray-50 ${className}` }, children));
};
const TableRow = ({ children, className = '' }) => {
return (React.createElement(framerMotion.motion.tr, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
};
const Tabs = ({ className = '', tabs, motionVariant = 'fadeIn', color = 'primary', variant = 'solid', fullWidth = false, tabClassName = '', panelClassName = '', ...rest }) => {
const [activeTab, setActiveTab] = React.useState(0);
const colorStyles = {
primary: {
solid: 'text-blue-600 border-b-2 border-blue-600 bg-blue-50',
outline: 'text-blue-600 border border-blue-600',
ghost: 'text-blue-600 hover:bg-blue-100',
},
secondary: {
solid: 'text-gray-600 border-b-2 border-gray-600 bg-gray-50',
outline: 'text-gray-600 border border-gray-600',
ghost: 'text-gray-600 hover:bg-gray-100',
},
success: {
solid: 'text-green-600 border-b-2 border-green-600 bg-green-50',
outline: 'text-green-600 border border-green-600',
ghost: 'text-green-600 hover:bg-green-100',
},
danger: {
solid: 'text-red-600 border-b-2 border-red-600 bg-red-50',
outline: 'text-red-600 border border-red-600',
ghost: 'text-red-600 hover:bg-red-100',
},
warning: {
solid: 'text-yellow-600 border-b-2 border-yellow-600 bg-yellow-50',
outline: 'text-yellow-600 border border-yellow-600',
ghost: 'text-yellow-600 hover:bg-yellow-100',
},
info: {
solid: 'text-blue-400 border-b-2 border-blue-400 bg-blue-50',
outline: 'text-blue-400 border border-blue-400',
ghost: 'text-blue-400 hover:bg-blue-100',
},
};
const getTabClass = (isActive) => {
if (isActive)
return colorStyles[color][variant];
return 'text-gray-500 hover:text-gray-700 hover:border-gray-300';
};
return (React.createElement("div", { className: `w-full ${className}` },
React.createElement("div", { className: "border-b border-gray-200" },
React.createElement("nav", { className: "flex space-x-4 overflow-x-auto", role: "tablist" }, tabs.map((tab, index) => (React.createElement("button", { key: index, disabled: tab.disabled, role: "tab", "aria-selected": activeTab === index, "aria-controls": `panel-${index}`, className: `px-4 py-2 text-sm font-medium focus:outline-none rounded-md transition-all
${fullWidth ? 'flex-1 text-center' : ''}
${getTabClass(activeTab === index)}
${tab.disabled ? 'opacity-50 cursor-not-allowed' : ''}
${tabClassName}`, onClick: () => !tab.disabled && setActiveTab(index) }, tab.label))))),
React.createElement(framerMotion.motion.div, { key: activeTab, initial: "hidden", animate: "visible", exit: "hidden", variants: motionVariants[motionVariant], className: `mt-4 ${panelClassName}`, role: "tabpanel", id: `panel-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, ...rest }, tabs[activeTab]?.content)));
};
const Tooltip = ({ children, className = '', content, position = 'top', color = 'primary', motionVariant = 'fadeIn', }) => {
const [isVisible, setIsVisible] = React.useState(false);
const positionClasses = {
top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',
bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
};
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("div", { className: "relative inline-block" },
React.createElement("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false) }, children),
React.createElement(framerMotion.AnimatePresence, null, isVisible && (React.createElement(framerMotion.motion.div, { className: `absolute z-10 px-3 py-2 text-sm font-medium text-white rounded-lg shadow-sm ${positionClasses[position]} ${colorClasses[color]} ${className}`, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, variants: motionVariants[motionVariant] }, content)))));
};
const Heading = ({ children, className = '', as = 'h2', size = 'md' }) => {
const Tag = as;
const sizeClasses = {
xs: 'text-lg',
sm: 'text-xl',
md: 'text-2xl',
lg: 'text-3xl',
xl: 'text-4xl',
};
return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
React.createElement(Tag, { className: `font-bold ${sizeClasses[size]} ${className}` }, children)));
};
const Text = ({ children, className = '', size = 'md', weight = 'normal' }) => {
const sizeClasses = {
xs: 'text-xs',
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
};
const weightClasses = {
normal: 'font-normal',
medium: 'font-medium',
semibold: 'font-semibold',
bold: 'font-bold',
};
return (React.createElement("p", { className: `${sizeClasses[size]} ${weightClasses[weight]} ${className}` }, children));
};
exports.Accordion = Accordion;
exports.Alert = Alert;
exports.Avatar = Avatar;
exports.Badge = Badge;
exports.Breadcrumb = Breadcrumb;
exports.Button = Button;
exports.Card = Card;
exports.CardBody = CardBody;
exports.CardFooter = CardFooter;
exports.CardHeader = CardHeader;
exports.Checkbox = Checkbox;
exports.Container = Container;
exports.Dropdown = Dropdown;
exports.DropdownItem = DropdownItem;
exports.FileUpload = FileUpload;
exports.Flex = Flex;
exports.Grid = Grid;
exports.Heading = Heading;
exports.IconButton = IconButton;
exports.Input = Input;
exports.List = List;
exports.ListItem = ListItem;
exports.Modal = Modal;
exports.ModalBody = ModalBody;
exports.ModalFooter = ModalFooter;
exports.ModalHeader = ModalHeader;
exports.NavItem = NavItem;
exports.Navbar = Navbar;
exports.Offcanvas = Offcanvas;
exports.OffcanvasBody = OffcanvasBody;
exports.OffcanvasHeader = OffcanvasHeader;
exports.Pagination = Pagination;
exports.ProgressBar = ProgressBar;
exports.Radio = Radio;
exports.RangeSlider = RangeSlider;
exports.Select = Select;
exports.Skeleton = Skeleton;
exports.Slider = Slider;
exports.Stepper = Stepper;
exports.Switch = Switch;
exports.Table = Table;
exports.TableBody = TableBody;
exports.TableCell = TableCell;
exports.TableHead = TableHead;
exports.TableRow = TableRow;
exports.Tabs = Tabs;
exports.Text = Text;
exports.Textarea = Textarea;
exports.Tooltip = Tooltip;
exports.motionVariants = motionVariants;
//# sourceMappingURL=index.js.map