npm - my-animated-components - Versions diffs - 1.1.9 → 1.2.0 - Mend

my-animated-components 1.1.9 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/dist/index.js +0 -1210

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/dist/index.js DELETED Viewed

@@ -1,1210 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-function styleInject(css, ref) {
-  if ( ref === undefined ) ref = {};
-  var insertAt = ref.insertAt;
-  if (typeof document === 'undefined') { return; }
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-var css_248z = "@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n";
-styleInject(css_248z);
-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', // Default motion variant
- }) => {
-    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',
-    };
-    return (React.createElement(motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, children));
-};
-const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', // Default motion variant
- }) => {
-    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',
-    };
-    return (React.createElement(motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: { scale: 1.1 }, whileTap: { scale: 0.95 } }, icon));
-};
-const Accordion = ({ className = '', items, color = 'primary', variant = 'solid', motionVariant = 'fadeIn', }) => {
-    const [openIndex, setOpenIndex] = useState(null);
-    const toggleItem = (index) => {
-        setOpenIndex(openIndex === index ? null : index);
-    };
-    const colors = {
-        primary: {
-            solid: 'bg-blue-100 border-blue-400 text-blue-900',
-            outline: 'border-blue-400 text-blue-600',
-            ghost: 'text-blue-600 hover:bg-blue-50',
-        },
-        secondary: {
-            solid: 'bg-gray-100 border-gray-400 text-gray-900',
-            outline: 'border-gray-400 text-gray-600',
-            ghost: 'text-gray-600 hover:bg-gray-50',
-        },
-        danger: {
-            solid: 'bg-red-100 border-red-400 text-red-900',
-            outline: 'border-red-400 text-red-600',
-            ghost: 'text-red-600 hover:bg-red-50',
-        },
-        success: {
-            solid: 'bg-green-100 border-green-400 text-green-900',
-            outline: 'border-green-400 text-green-600',
-            ghost: 'text-green-600 hover:bg-green-50',
-        },
-        info: {
-            solid: 'bg-blue-100 border-blue-400 text-blue-900',
-            outline: 'border-blue-400 text-blue-600',
-            ghost: 'text-blue-600 hover:bg-blue-50',
-        },
-        warning: {
-            solid: 'bg-yellow-100 border-yellow-400 text-yellow-900',
-            outline: 'border-yellow-400 text-yellow-600',
-            ghost: 'text-yellow-600 hover:bg-yellow-50',
-        },
-    };
-    const variantClasses = colors[color][variant];
-    return (React.createElement("div", { className: `space-y-2 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `border rounded-md ${variantClasses}` },
-        React.createElement("button", { className: `flex justify-between items-center w-full px-4 py-2 text-left focus:outline-none`, onClick: () => toggleItem(index) },
-            React.createElement("span", null, item.title),
-            React.createElement(motion.svg, { className: "w-5 h-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", animate: { rotate: openIndex === 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(AnimatePresence, null, openIndex === index && (React.createElement(motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", className: "px-4 py-2 border-t" }, item.content))))))));
-};
-const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn', // Default motion variant
- }) => {
-    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(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
- }) => {
-    const colorClasses = {
-        primary: 'bg-blue-100 text-blue-800',
-        secondary: 'bg-gray-100 text-gray-800',
-        success: 'bg-green-100 text-green-800',
-        danger: 'bg-red-100 text-red-800',
-        warning: 'bg-yellow-100 text-yellow-800',
-        info: 'bg-indigo-100 text-indigo-800',
-    };
-    const sizeClasses = {
-        xs: 'px-2 py-0.5 text-xs',
-        sm: 'px-2.5 py-0.5 text-sm',
-        md: 'px-3 py-1 text-sm',
-        lg: 'px-3.5 py-1.5 text-base',
-        xl: 'px-4 py-2 text-lg',
-    };
-    return (React.createElement(motion.span, { className: `inline-flex items-center font-medium rounded-full ${colorClasses[color]} ${sizeClasses[size]} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
-};
-const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn' }) => {
-    return (React.createElement(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'
-                    : 'text-blue-600 hover:text-blue-800'}` }, item.label)))))));
-};
-const Card = ({ children, className = '', motionVariant = 'fadeIn' }) => {
-    return (React.createElement(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(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(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(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] = useState(false);
-    const dropdownRef = useRef(null);
-    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(AnimatePresence, null, isOpen && (React.createElement(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', // Default color
-motionVariant = 'fadeIn', // Default motion variant
- }) => {
-    const colorClasses = {
-        primary: 'text-blue-600',
-        secondary: 'text-gray-600',
-        success: 'text-green-600',
-        danger: 'text-red-600',
-        warning: 'text-yellow-500',
-        info: 'text-blue-400',
-    };
-    return (React.createElement(motion.label, { className: `inline-flex items-center ${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 ${colorClasses[color]}`, checked: checked, onChange: onChange }),
-        React.createElement("span", { className: "ml-2 text-gray-700" }, label)));
-};
-const FileUpload = ({ className = '', onChange, accept, multiple, buttonColor = 'primary', // Default button color
-motionVariant = 'fadeIn', // Default motion variant
- }) => {
-    const fileInputRef = 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(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, }) => {
-    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(motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
-        React.createElement("input", { type: type, className: `w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange })));
-};
-const Radio = ({ className = '', label, name, value, checked, onChange, color = 'primary', size = 'md', motionVariant = 'fadeIn', // Default motion variant
- }) => {
-    const baseClasses = 'inline-flex items-center';
-    const colorClasses = {
-        primary: 'text-blue-600',
-        secondary: 'text-gray-600',
-        success: 'text-green-600',
-        danger: 'text-red-600',
-        warning: 'text-yellow-500',
-        info: 'text-blue-400',
-    };
-    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(motion.label, { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
-        React.createElement("input", { type: "radio", className: "form-radio", name: name, value: value, checked: checked, onChange: onChange }),
-        React.createElement("span", { className: "ml-2 text-gray-700" }, 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(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(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(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(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(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(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 }) => {
-    return (React.createElement(AnimatePresence, null, isOpen && (React.createElement(motion.div, { className: "fixed inset-0 z-50 overflow-y-auto", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } },
-        React.createElement("div", { className: "flex items-end 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-gray-500 opacity-75", onClick: onClose })),
-            React.createElement("span", { className: "hidden sm:inline-block sm:align-middle sm:h-screen", "aria-hidden": "true" }, "\u200B"),
-            React.createElement(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 sm:max-w-lg sm:w-full ${className}`, initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 } }, 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(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 }) => {
-    return (React.createElement(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: "flex items-center" }, children)))));
-};
-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(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(motion.div, { className: "absolute inset-0 bg-gray-500 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(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', // Default motion variant
- }) => {
-    const pageNumbers = [];
-    for (let i = 1; i <= totalPages; i++) {
-        pageNumbers.push(i);
-    }
-    const colorClasses = {
-        primary: 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700',
-        secondary: 'text-gray-600 bg-gray-50 hover:bg-gray-100 hover:text-gray-700',
-        success: 'text-green-600 bg-green-50 hover:bg-green-100 hover:text-green-700',
-        danger: 'text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700',
-        warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700',
-        info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500',
-    };
-    return (React.createElement(motion.nav, { className: `flex justify-center ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, variants: motionVariants[motionVariant] },
-        React.createElement("ul", { className: "flex items-center -space-x-px" },
-            React.createElement("li", null,
-                React.createElement(motion.button, { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: `block px-3 py-2 ml-0 leading-tight border border-gray-300 rounded-l-lg ${colorClasses[color]} ${currentPage === 1 && 'cursor-not-allowed opacity-50'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, "Previous")),
-            pageNumbers.map((number) => (React.createElement("li", { key: number },
-                React.createElement(motion.button, { onClick: () => onPageChange(number), className: `px-3 py-2 leading-tight border border-gray-300 ${colorClasses[color]} ${currentPage === number
-                        ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
-                        : 'bg-white hover:bg-gray-100'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, number)))),
-            React.createElement("li", null,
-                React.createElement(motion.button, { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: `block px-3 py-2 leading-tight border border-gray-300 rounded-r-lg ${colorClasses[color]} ${currentPage === totalPages && 'cursor-not-allowed opacity-50'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, "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(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(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(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(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 Stepper = ({ className = '', steps, currentStep }) => {
-    return (React.createElement("div", { className: `flex items-center ${className}` }, steps.map((step, index) => (React.createElement(React.Fragment, { key: index },
-        React.createElement("div", { className: "flex items-center" },
-            React.createElement("div", { className: `flex items-center justify-center w-8 h-8 rounded-full ${index < currentStep
-                    ? 'bg-blue-600 text-white'
-                    : index === currentStep
-                        ? 'bg-blue-200 text-blue-600'
-                        : 'bg-gray-200 text-gray-600'}` }, index < currentStep ? (React.createElement("svg", { className: "w-5 h-5", 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 h-1 mx-2 ${index < currentStep ? 'bg-blue-600' : 'bg-gray-200'}` }))),
-        index < steps.length - 1 && (React.createElement("div", { className: "hidden sm:block text-xs text-center text-gray-500 mt-2" }, step)))))));
-};
-const Table = ({ children, className = '', motionVariant = 'fadeIn', // Default motion variant
-color = 'primary', // Color customization
- }) => {
-    const baseClasses = 'overflow-x-auto';
-    const colorClasses = {
-        primary: 'border-blue-600 text-blue-600',
-        secondary: 'border-gray-600 text-gray-600',
-        success: 'border-green-600 text-green-600',
-        danger: 'border-red-600 text-red-600',
-        warning: 'border-yellow-500 text-yellow-500',
-        info: 'border-blue-400 text-blue-400',
-    };
-    return (React.createElement(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(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', // Default motion variant
-color = 'primary', // Color customization
- }) => {
-    const [activeTab, setActiveTab] = useState(0);
-    const colorClasses = {
-        primary: 'text-blue-600 border-blue-500',
-        secondary: 'text-gray-600 border-gray-500',
-        success: 'text-green-600 border-green-500',
-        danger: 'text-red-600 border-red-500',
-        warning: 'text-yellow-600 border-yellow-500',
-        info: 'text-blue-400 border-blue-400',
-    };
-    return (React.createElement("div", { className: className },
-        React.createElement("div", { className: "border-b border-gray-200" },
-            React.createElement("nav", { className: "-mb-px flex space-x-8", "aria-label": "Tabs" }, tabs.map((tab, index) => (React.createElement("button", { key: index, className: `
-                whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm
-                ${activeTab === index
-                    ? `${colorClasses[color]}`
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}
-              `, onClick: () => setActiveTab(index) }, tab.label))))),
-        React.createElement(motion.div, { key: activeTab, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant], className: "mt-4" }, tabs[activeTab].content)));
-};
-const Tooltip = ({ children, className = '', content, position = 'top', color = 'primary', motionVariant = 'fadeIn', }) => {
-    const [isVisible, setIsVisible] = 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(AnimatePresence, null, isVisible && (React.createElement(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(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));
-};
-export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };