my-animated-components 1.0.4 → 1.0.5

package/dist/index.js

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 function styleInject(css, ref) {
   if ( ref === undefined ) ref = {};
@@ -31,51 +31,485 @@ function styleInject(css, ref) {
 var css_248z = "@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n";
 styleInject(css_248z);
 
-// Dynamically import and load components, returning them for export
-const loadComponents = (componentsPath) => {
-    return new Promise((resolve, reject) => {
-        fs.readdir(componentsPath, { withFileTypes: true }, async (err, files) => {
-            if (err) {
-                reject('Error reading components directory:');
-                return;
+const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', }) => {
+    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',
+        },
+    };
+    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, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 } }, children));
+};
+
+const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', }) => {
+    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',
+        },
+    };
+    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, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 } }, icon));
+};
+
+const Accordion = ({ className = '', items }) => {
+    const [openIndex, setOpenIndex] = useState(null);
+    const toggleItem = (index) => {
+        setOpenIndex(openIndex === index ? null : index);
+    };
+    return (React.createElement("div", { className: `space-y-2 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: "border border-gray-200 rounded-md" },
+        React.createElement("button", { className: "flex justify-between items-center w-full px-4 py-2 text-left", 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, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, className: "px-4 py-2 border-t border-gray-200" }, item.content))))))));
+};
+
+const Alert = ({ children, className = '', color = 'primary', onClose }) => {
+    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", initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, 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' }) => {
+    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}`, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.3 } }, children));
+};
+
+const Breadcrumb = ({ className = '', items }) => {
+    return (React.createElement("nav", { className: `flex ${className}`, "aria-label": "Breadcrumb" },
+        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 = '' }) => {
+    return (React.createElement(motion.div, { className: `bg-white shadow rounded-lg overflow-hidden ${className}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } }, children));
+};
+
+const CardBody = ({ children, className = '' }) => {
+    return (React.createElement("div", { className: `px-4 py-5 sm:p-6 ${className}` }, children));
+};
+
+const CardFooter = ({ children, className = '' }) => {
+    return (React.createElement("div", { className: `px-4 py-4 sm:px-6 ${className}` }, children));
+};
+
+const CardHeader = ({ children, className = '' }) => {
+    return (React.createElement("div", { className: `px-4 py-5 sm:px-6 ${className}` }, children));
+};
+
+const Dropdown = ({ children, className = '', trigger }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
             }
-            const componentPromises = files.map(async (file) => {
-                if (file.isDirectory()) {
-                    console.log(`Folder: ${file.name}`);
-                }
-                else {
-                    console.log(`Importing: ${file.name}`);
-                    try {
-                        const component = await import(path.join(componentsPath, file.name));
-                        return { name: file.name.replace('.tsx', ''), component };
-                    }
-                    catch (error) {
-                        console.error(`Error importing component ${file.name}:`, error);
-                        return null;
-                    }
-                }
-            });
-            const components = await Promise.all(componentPromises);
-            resolve(components.filter((comp) => comp !== null));
-        });
-    });
-};
-
-// Set the path to your components directory
-const componentsPath = './components';
-let componentsExports = {};
-// Dynamically load the components
-loadComponents(componentsPath)
-    .then((components) => {
-    components.forEach(({ name, component }) => {
-        if (component) {
-            // Dynamically assign each component to the componentsExports object
-            componentsExports[name] = component;
-        }
-    });
-})
-    .catch((err) => {
-    console.error('Error loading components:', err);
-});
-
-export { componentsExports };
+        };
+        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, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, 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, }) => {
+    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 } },
+        React.createElement("input", { type: "checkbox", className: "form-checkbox h-5 w-5 text-blue-600", checked: checked, onChange: onChange }),
+        React.createElement("span", { className: "ml-2 text-gray-700" }, label)));
+};
+
+const FileUpload = ({ className = '', onChange, accept, multiple }) => {
+    const fileInputRef = useRef(null);
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+    const handleChange = (event) => {
+        const file = event.target.files?.[0] || null;
+        onChange(file);
+    };
+    return (React.createElement(motion.div, { className: `flex items-center ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
+        React.createElement("button", { type: "button", onClick: handleClick, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, "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, }) => {
+    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 } },
+        React.createElement("input", { type: "radio", className: "form-radio h-5 w-5 text-blue-600", 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, }) => {
+    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("select", { className: `w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${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 }) => {
+    return (React.createElement(motion.label, { className: `inline-flex items-center cursor-pointer ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, 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 ? 'bg-blue-600' : ''}` }),
+            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, }) => {
+    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("textarea", { 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, rows: rows })));
+};
+
+const Container = ({ children, className = '', fluid = false }) => {
+    const containerClass = fluid ? 'w-full' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8';
+    return (React.createElement("div", { className: `${containerClass} ${className}` }, 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 }) => {
+    const activeClass = active ? 'text-gray-900 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700';
+    return (React.createElement(motion.a, { href: href, className: `inline-flex items-center px-1 pt-1 text-sm font-medium ${activeClass} ${className}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 } }, 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 }) => {
+    const pageNumbers = [];
+    for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(i);
+    }
+    return (React.createElement("nav", { className: `flex justify-center ${className}` },
+        React.createElement("ul", { className: "flex items-center -space-x-px" },
+            React.createElement("li", null,
+                React.createElement("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700" }, "Previous")),
+            pageNumbers.map((number) => (React.createElement("li", { key: number },
+                React.createElement("button", { onClick: () => onPageChange(number), className: `px-3 py-2 leading-tight border border-gray-300 ${currentPage === number
+                        ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700'
+                        : 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700'}` }, number)))),
+            React.createElement("li", null,
+                React.createElement("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700" }, "Next")))));
+};
+
+const ProgressBar = ({ className = '', color = 'primary', value, max = 100 }) => {
+    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 }, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max })));
+};
+
+const Skeleton = ({ className = '', width = '100%', height = '20px' }) => {
+    return (React.createElement("div", { className: `animate-pulse bg-gray-200 rounded ${className}`, style: { width, height } }));
+};
+
+const Slider = ({ className = '', min, max, value, onChange, step = 1 }) => {
+    const percentage = ((value - min) / (max - min)) * 100;
+    return (React.createElement("div", { className: `relative w-full h-2 bg-gray-200 rounded-full ${className}` },
+        React.createElement(motion.div, { className: "absolute h-full bg-blue-600 rounded-full", style: { width: `${percentage}%` }, initial: { width: 0 }, animate: { width: `${percentage}%` }, 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 }) => {
+    const [minValue, maxValue] = values;
+    const minPercentage = ((minValue - min) / (max - min)) * 100;
+    const maxPercentage = ((maxValue - min) / (max - min)) * 100;
+    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 bg-blue-600 rounded-full", style: { left: `${minPercentage}%`, right: `${100 - maxPercentage}%` }, initial: { left: 0, right: '100%' }, animate: { left: `${minPercentage}%`, right: `${100 - maxPercentage}%` }, 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 = '' }) => {
+    return (React.createElement(motion.div, { className: "overflow-x-auto", initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } },
+        React.createElement("table", { className: `min-w-full divide-y divide-gray-200 ${className}` }, 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 }) => {
+    const [activeTab, setActiveTab] = useState(0);
+    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
+                    ? 'border-blue-500 text-blue-600'
+                    : '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 }, className: "mt-4" }, tabs[activeTab].content)));
+};
+
+const Tooltip = ({ children, className = '', content, position = 'top' }) => {
+    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',
+    };
+    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 bg-gray-900 rounded-lg shadow-sm ${positionClasses[position]} ${className}`, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 } }, 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 };

package/dist/src/index.d.ts

@@ -1,3 +1,51 @@
 import './styles/tailwind.css';
-declare let componentsExports: Record<string, any>;
-export { componentsExports };
+import { Button } from './components/buttons/Button';
+import { IconButton } from './components/buttons/IconButton';
+import { Accordion } from './components/accordion/Accordion';
+import { Alert } from './components/alert/Alert';
+import { Avatar } from './components/avatar/Avatar';
+import { Badge } from './components/badge/Badge';
+import { Breadcrumb } from './components/breadcrumb/Breadcrumb';
+import { Card } from './components/card/Card';
+import { CardBody } from './components/card/CardBody';
+import { CardFooter } from './components/card/CardFooter';
+import { CardHeader } from './components/card/CardHeader';
+import { Dropdown } from './components/dropdown/Dropdown';
+import { DropdownItem } from './components/dropdown/DropdownItem';
+import { Checkbox } from './components/form/Checkbox';
+import { FileUpload } from './components/form/FileUpload';
+import { Input } from './components/form/Input';
+import { Radio } from './components/form/Radio';
+import { Select } from './components/form/Select';
+import { Switch } from './components/form/Switch';
+import { Textarea } from './components/form/Textarea';
+import { Container } from './components/layout/Container';
+import { Flex } from './components/layout/Flex';
+import { Grid } from './components/layout/Grid';
+import { List } from './components/list/List';
+import { ListItem } from './components/list/ListItem';
+import { Modal } from './components/modal/Modal';
+import { ModalBody } from './components/modal/ModalBody';
+import { ModalFooter } from './components/modal/ModalFooter';
+import { ModalHeader } from './components/modal/ModalHeader';
+import { NavItem } from './components/navigation/NavItem';
+import { Navbar } from './components/navigation/Navbar';
+import { Offcanvas } from './components/offcanvas/Offcanvas';
+import { OffcanvasBody } from './components/offcanvas/OffcanvasBody';
+import { OffcanvasHeader } from './components/offcanvas/OffcanvasHeader';
+import { Pagination } from './components/pagination/Pagination';
+import { ProgressBar } from './components/progress/ProgressBar';
+import { Skeleton } from './components/skeleton/Skeleton';
+import { Slider } from './components/slider/Slider';
+import { RangeSlider } from './components/slider/RangeSlider';
+import { Stepper } from './components/stepper/Stepper';
+import { Table } from './components/table/Table';
+import { TableBody } from './components/table/TableBody';
+import { TableCell } from './components/table/TableCell';
+import { TableHead } from './components/table/TableHead';
+import { TableRow } from './components/table/TableRow';
+import { Tabs } from './components/tabs/Tabs';
+import { Tooltip } from './components/tooltip/Tooltip';
+import { Heading } from './components/typography/Heading';
+import { Text } from './components/typography/Text';
+export { Button, IconButton, Accordion, Alert, Avatar, Badge, Breadcrumb, Card, CardBody, CardFooter, CardHeader, Dropdown, DropdownItem, Checkbox, FileUpload, Input, Radio, Select, Switch, Textarea, Container, Flex, Grid, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Skeleton, Slider, RangeSlider, Stepper, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Tooltip, Heading, Text };

package/package.json

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

package/readme.md

@@ -1,20 +1,102 @@
-# Animated Components
+# MY Animated Components
 
-**Animated Components** is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons and icon buttons with different styles, sizes, and interactive animations.
+**My Animated Components** is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons and icon buttons with different styles, sizes, and interactive animations.
 
 ---
 
 ## Features
 
-- **Customizable Buttons**: Supports different variants (`solid`, `outline`, `ghost`) and colors (`primary`, `secondary`).
-- **Icon Button**: Use any custom icon inside the button.
-- **Framer Motion Animations**: Interactive hover and tap animations to enhance user experience.
+Animated Components
+Animated Components is a collection of customizable React components built with Framer Motion for smooth animations. It provides buttons, icon buttons, and other interactive UI elements with different styles, sizes, and animations.
+
+Features
+Customizable Buttons: Supports different variants (solid, outline, ghost) and colors (primary, secondary, etc.).
+Icon Button: Use any custom icon inside the button for more flexibility.
+Framer Motion Animations: Interactive hover and tap animations to enhance user experience.
+Various UI Elements: Includes components like Accordion, Alert, Badge, Modal, Dropdown, and more.
+Available Components
+Button
+IconButton
+Accordion
+Alert
+Avatar
+Badge
+Breadcrumb
+Card
+Dropdown
+Checkbox
+FileUpload
+Input
+Radio
+Select
+Switch
+Textarea
+Modal
+Navbar
+Pagination
+ProgressBar
+Slider
+Table
+Tabs
+Tooltip
+Heading
+Text
+
+## props 
+color (optional): Sets the color of the component. Available values: primary, secondary, success, danger, warning, info.
+className
+children
+
+## Example Usage
+import { Button } from 'my-animated-components';
+
+const MyComponent = () => {
+  return (
+    <Button color="primary" size="md" className="my-custom-class">
+      Click Me
+    </Button>
+  );
+};
+
+## other example 
+
+import { IconButton } from 'my-animated-components';
+import { FaBeer } from 'react-icons/fa';
+
+const MyComponent = () => {
+  return (
+    <IconButton color="secondary" size="lg">
+      <FaBeer />
+    </IconButton>
+  );
+};
+
 
----
 
 ## Installation
+To install my-animated-components in your React project, you also need to install Tailwind CSS and Framer Motion as dependencies. Run the following commands:
 
-To install **my-animated-components** in your React project, run the following command:
+Install my-animated-components:
+bash
+Copy code
+npm install my-animated-components
+Install Tailwind CSS (if not already installed in your project):
+bash
+Copy code
+npm install -D tailwindcss
+Install Framer Motion (for animations):
+bash
+Copy code
+npm install framer-motion
+Add Tailwind to your CSS file (e.g., src/index.css):
+css
+Copy code
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+Make sure to configure Tailwind in your tailwind.config.js file if it is not already set up:
+bash
+Copy code
+npx tailwindcss init
 
-```bash
 npm install my-animated-components

package/rollup.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
     format: 'es',
     name: 'my-animated-components',
   },
-  external: ['react', 'react-dom', 'tailwindcss', 'framer-motion','fs', 'path'],
+  external: ['react', 'react-dom', 'tailwindcss', 'framer-motion'],
   plugins: [
     typescript({ tsconfig: 'tsconfig.json' }),
     postcss({

package/src/index.ts

@@ -1,24 +1,104 @@
 import './styles/tailwind.css';
-import { loadComponents } from './utils/Listfiles';
 
-// Set the path to your components directory
-const componentsPath = './components';
+import { Button } from './components/buttons/Button';
+import { IconButton } from './components/buttons/IconButton';
+import { Accordion } from './components/accordion/Accordion';
+import { Alert } from './components/alert/Alert';
+import { Avatar } from './components/avatar/Avatar';
+import { Badge } from './components/badge/Badge';
+import { Breadcrumb } from './components/breadcrumb/Breadcrumb';
+import { Card } from './components/card/Card';
+import { CardBody } from './components/card/CardBody';
+import { CardFooter } from './components/card/CardFooter';
+import { CardHeader } from './components/card/CardHeader';
+import { Dropdown } from './components/dropdown/Dropdown';
+import { DropdownItem } from './components/dropdown/DropdownItem';
+import { Checkbox } from './components/form/Checkbox';
+import { FileUpload } from './components/form/FileUpload';
+import { Input } from './components/form/Input';
+import { Radio } from './components/form/Radio';
+import { Select } from './components/form/Select';
+import { Switch } from './components/form/Switch';
+import { Textarea } from './components/form/Textarea';
+import { Container } from './components/layout/Container';
+import { Flex } from './components/layout/Flex';
+import { Grid } from './components/layout/Grid';
+import { List } from './components/list/List';
+import { ListItem } from './components/list/ListItem';
+import { Modal } from './components/modal/Modal';
+import { ModalBody } from './components/modal/ModalBody';
+import { ModalFooter } from './components/modal/ModalFooter';
+import { ModalHeader } from './components/modal/ModalHeader';
+import { NavItem } from './components/navigation/NavItem';
+import { Navbar } from './components/navigation/Navbar';
+import { Offcanvas } from './components/offcanvas/Offcanvas';
+import { OffcanvasBody } from './components/offcanvas/OffcanvasBody';
+import { OffcanvasHeader } from './components/offcanvas/OffcanvasHeader';
+import { Pagination } from './components/pagination/Pagination';
+import { ProgressBar } from './components/progress/ProgressBar';
+import { Skeleton } from './components/skeleton/Skeleton';
+import { Slider } from './components/slider/Slider';
+import { RangeSlider } from './components/slider/RangeSlider';
+import { Stepper } from './components/stepper/Stepper';
+import { Table } from './components/table/Table';
+import { TableBody } from './components/table/TableBody';
+import { TableCell } from './components/table/TableCell';
+import { TableHead } from './components/table/TableHead';
+import { TableRow } from './components/table/TableRow';
+import { Tabs } from './components/tabs/Tabs';
+import { Tooltip } from './components/tooltip/Tooltip';
+import { Heading } from './components/typography/Heading';
+import { Text } from './components/typography/Text';
 
-let componentsExports: Record<string, any> = {};
-
-// Dynamically load the components
-loadComponents(componentsPath)
-  .then((components) => {
-    components.forEach(({ name, component }: any) => {
-      if (component) {
-        // Dynamically assign each component to the componentsExports object
-        componentsExports[name] = component;
-      }
-    });
-  })
-  .catch((err) => {
-    console.error('Error loading components:', err);
-  });
-
-// After loading, export all components from the componentsExports object
-export { componentsExports };
+// Export all components
+export {
+  Button,
+  IconButton,
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Dropdown,
+  DropdownItem,
+  Checkbox,
+  FileUpload,
+  Input,
+  Radio,
+  Select,
+  Switch,
+  Textarea,
+  Container,
+  Flex,
+  Grid,
+  List,
+  ListItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  NavItem,
+  Navbar,
+  Offcanvas,
+  OffcanvasBody,
+  OffcanvasHeader,
+  Pagination,
+  ProgressBar,
+  Skeleton,
+  Slider,
+  RangeSlider,
+  Stepper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tabs,
+  Tooltip,
+  Heading,
+  Text
+};

package/dist/src/utils/Listfiles.d.ts

@@ -1 +0,0 @@
-export declare const loadComponents: (componentsPath: string) => Promise<any[]>;

package/src/utils/Listfiles.ts

@@ -1,36 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-// TypeScript type for file and folder entries
-type FileOrFolder = fs.Dirent;
-
-// Dynamically import and load components, returning them for export
-export const loadComponents = (componentsPath: string): Promise<any[]> => {
-  return new Promise((resolve, reject) => {
-    fs.readdir(componentsPath, { withFileTypes: true }, async (err, files: FileOrFolder[]) => {
-      if (err) {
-        reject('Error reading components directory:');
-        return;
-      }
-
-      const componentPromises = files.map(async (file) => {
-        if (file.isDirectory()) {
-          console.log(`Folder: ${file.name}`);
-        } else {
-          console.log(`Importing: ${file.name}`);
-
-          try {
-            const component = await import(path.join(componentsPath, file.name));
-            return { name: file.name.replace('.tsx', ''), component };
-          } catch (error) {
-            console.error(`Error importing component ${file.name}:`, error);
-            return null;
-          }
-        }
-      });
-
-      const components = await Promise.all(componentPromises);
-      resolve(components.filter((comp) => comp !== null));
-    });
-  });
-};