my-animated-components 1.3.0 → 1.3.2

package/dist/index.js

@@ -1,5 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
 
 const motionVariants = {
     null: {},
@@ -519,7 +521,7 @@ const Button = ({ children, className = '', color = 'primary', size = 'md', onCl
         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));
+    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" }, children));
 };
 
 const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', // Default motion variant
@@ -564,11 +566,11 @@ const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onCl
         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));
+    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: { scale: 1.1 }, whileTap: { scale: 0.95 } }, icon));
 };
 
 const Accordion = ({ className = '', items, color = 'primary', variant = 'solid', motionVariant = 'fadeIn', }) => {
-    const [openIndex, setOpenIndex] = useState(null);
+    const [openIndex, setOpenIndex] = React.useState(null);
     const toggleItem = (index) => {
         setOpenIndex(openIndex === index ? null : index);
     };
@@ -608,9 +610,9 @@ const Accordion = ({ className = '', items, color = 'primary', variant = 'solid'
     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(framerMotion.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))))))));
+        React.createElement(framerMotion.AnimatePresence, null, openIndex === index && (React.createElement(framerMotion.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
@@ -623,7 +625,7 @@ const Alert = ({ children, className = '', color = 'primary', onClose, motionVar
         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 } },
+    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" },
@@ -677,7 +679,7 @@ const Badge = ({ children, className = '', color = 'primary', size = 'md', motio
         padding: sizeStyles[size].padding,
         fontSize: sizeStyles[size].fontSize,
     };
-    return (React.createElement(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));
+    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' }) => {
@@ -690,7 +692,7 @@ const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = '
         warning: 'text-yellow-600 hover:text-yellow-800',
         info: 'text-blue-400 hover:text-blue-500',
     };
-    return (React.createElement(motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
+    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" }))),
@@ -698,25 +700,25 @@ const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = '
 };
 
 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));
+    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(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));
+    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(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));
+    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(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));
+    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] = useState(false);
-    const dropdownRef = useRef(null);
-    useEffect(() => {
+    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);
@@ -730,7 +732,7 @@ const Dropdown = ({ children, className = '', trigger, motionVariant = 'fadeIn'
     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))))));
+            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 = '' }) => {
@@ -746,7 +748,7 @@ const Checkbox = ({ className = '', label, checked, onChange, color = 'primary',
         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(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] },
+    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)));
 };
@@ -754,7 +756,7 @@ const Checkbox = ({ className = '', label, checked, onChange, color = 'primary',
 const FileUpload = ({ className = '', onChange, accept, multiple, buttonColor = 'primary', // Default button color
 motionVariant = 'fadeIn', // Default motion variant
  }) => {
-    const fileInputRef = useRef(null);
+    const fileInputRef = React.useRef(null);
     const handleClick = () => {
         fileInputRef.current?.click();
     };
@@ -770,7 +772,7 @@ motionVariant = 'fadeIn', // Default motion variant
         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] },
+    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" })));
 };
@@ -799,7 +801,7 @@ const Input = ({ className = '', size = 'md', type = 'text', placeholder, value,
         green: 'text-green-600',
         red: 'text-red-600',
     };
-    return (React.createElement(motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
+    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 })));
 };
 
@@ -822,7 +824,7 @@ const Radio = ({ className = '', label, name, value, checked, onChange, color =
         lg: 'h-7 w-7',
         xl: 'h-8 w-8',
     };
-    return (React.createElement(motion.label, { className: `${baseClasses} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
+    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)));
 };
@@ -845,7 +847,7 @@ const Select = ({ className = '', size = 'md', options, value, onChange, color =
         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 } },
+    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))))));
 };
 
@@ -860,7 +862,7 @@ const Switch = ({ className = '', checked, onChange, label, color = 'primary', m
         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 } },
+    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] : ''}` }),
@@ -886,13 +888,13 @@ const Textarea = ({ className = '', size = 'md', placeholder, value, onChange, r
         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 } },
+    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(motion.div, { className: `${containerClass} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden" }, children));
+    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, }) => {
@@ -912,21 +914,21 @@ const Grid = ({ children, className = '', cols = 3, gap = 4 }) => {
 
 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 } },
+    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(motion.li, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
+    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(AnimatePresence, null, isOpen && (React.createElement(motion.div, { className: "fixed inset-0 z-50 overflow-y-auto", variants: motionVariants[motionVariant] },
+    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(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))))));
+            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 = '' }) => {
@@ -951,12 +953,12 @@ const NavItem = ({ children, className = '', href, active = false, size = 'md',
         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));
+    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] = useState(false);
-    return (React.createElement(motion.nav, { className: `bg-white shadow ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
+    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),
@@ -982,11 +984,11 @@ const Offcanvas = ({ children, className = '', isOpen, onClose, position = 'left
         top: { y: '-100%' },
         bottom: { y: '100%' },
     };
-    return (React.createElement(AnimatePresence, null, isOpen && (React.createElement("div", { className: "fixed inset-0 z-50 overflow-hidden" },
+    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(motion.div, { className: "absolute inset-0 bg-opacity-75 transition-opacity", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose }),
+            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(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(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))))))));
 };
 
@@ -1017,16 +1019,16 @@ const Pagination = ({ className = '', currentPage, totalPages, onPageChange, col
         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] },
+    return (React.createElement(framerMotion.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")),
+                React.createElement(framerMotion.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
+                React.createElement(framerMotion.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")))));
+                React.createElement(framerMotion.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
@@ -1041,7 +1043,7 @@ const ProgressBar = ({ className = '', color = 'primary', value, max = 100, moti
         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 })));
+        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
@@ -1054,7 +1056,7 @@ const Skeleton = ({ className = '', width = '100%', height = '20px', color = 'pr
         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" }));
+    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
@@ -1070,7 +1072,7 @@ motionVariant = 'fadeIn', // Default motion variant
         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(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" })));
 };
 
@@ -1097,7 +1099,7 @@ motionVariant = 'fadeIn', // Default motion variant
         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(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" })));
 };
@@ -1150,7 +1152,7 @@ color = 'primary', // Color customization
         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(motion.div, { className: `${baseClasses} ${colorClasses[color]} ${className}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
+    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)));
 };
 
@@ -1169,13 +1171,13 @@ const TableHead = ({ children, className = '' }) => {
 };
 
 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));
+    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', // Default motion variant
 color = 'primary', // Color customization
  }) => {
-    const [activeTab, setActiveTab] = useState(0);
+    const [activeTab, setActiveTab] = React.useState(0);
     const colorClasses = {
         primary: 'text-blue-600 border-blue-500',
         secondary: 'text-gray-600 border-gray-500',
@@ -1192,11 +1194,11 @@ color = 'primary', // Color customization
                     ? `${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)));
+        React.createElement(framerMotion.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 [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',
@@ -1213,7 +1215,7 @@ const Tooltip = ({ children, className = '', content, position = 'top', color =
     };
     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)))));
+        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' }) => {
@@ -1225,7 +1227,7 @@ const Heading = ({ children, className = '', as = 'h2', size = 'md' }) => {
         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 } },
+    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)));
 };
 
@@ -1246,5 +1248,54 @@ const Text = ({ children, className = '', size = 'md', weight = 'normal' }) => {
     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 };
+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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "my-animated-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "description": "",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "scripts": {
     "build": "npx rollup -c"
   },
@@ -66,7 +66,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "rollup": "^4.12.0"
+    "rollup": "^4.12.0",
+    "rollup-plugin-dts": "^6.1.1"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.6",
@@ -83,4 +84,4 @@
     "tslib": "^2.6.2",
     "typescript": "^5.7.3"
   }
-}
+}