my-animated-components 1.0.4 → 1.0.6

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,743 @@ 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 motionVariants = {
+    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 } },
+    },
+};
+
+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);
             }
-            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, { 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 }) => {
+    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, 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 };