my-animated-components 1.3.9 → 1.4.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React$1 from 'react';
-import { Variants, HTMLMotionProps, motion } from 'framer-motion';
+import React$1, { ReactNode } from 'react';
+import { Variants, HTMLMotionProps, Transition, motion, MotionProps } from 'framer-motion';
 
 declare const motionVariants: Record<string, Variants>;
 
@@ -10,27 +10,106 @@ interface WithChildren {
     children: React.ReactNode;
 }
 type Color$e = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type Size$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface ColorProps {
     color?: Color$e;
 }
 interface SizeProps {
-    size?: Size;
+    size?: Size$1;
 }
 
-type Color$d = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-type MotionVariantKey = keyof typeof motionVariants;
+type Color$d = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string;
+type ButtonVariant = 'solid' | 'outline' | 'ghost' | string;
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+type MotionVariantKey$3 = keyof typeof motionVariants;
 interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
-    variant?: 'solid' | 'outline' | 'ghost';
+    /**
+     * Visual style of the button
+     * @default 'solid'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Color theme of the button
+     * @default 'primary'
+     */
     color?: Color$d;
     /**
-     * Predefined motion variant name from motionVariants.
-     * This will apply the corresponding animation configuration.
+     * Predefined motion variant from motionVariants for initial animation
+     * @default 'fadeIn'
      */
-    motionVariant?: MotionVariantKey;
-    whileHoverAnimation?: MotionVariantKey;
-    whileTapAnimation?: MotionVariantKey;
-    whileFocusAnimation?: MotionVariantKey;
+    motionVariant?: MotionVariantKey$3;
+    /**
+     * Custom animation variants to override default motionVariants
+     */
+    customVariants?: Variants;
+    /**
+     * Predefined motion variant for hover animation
+     */
+    whileHoverAnimation?: MotionVariantKey$3;
+    /**
+     * Predefined motion variant for tap animation
+     */
+    whileTapAnimation?: MotionVariantKey$3;
+    /**
+     * Predefined motion variant for focus animation
+     */
+    whileFocusAnimation?: MotionVariantKey$3;
+    /**
+     * Custom transition for initial animation
+     */
+    customTransition?: Transition;
+    /**
+     * Custom hover animation properties
+     */
+    customHoverAnimation?: Record<string, any>;
+    /**
+     * Custom tap animation properties
+     */
+    customTapAnimation?: Record<string, any>;
+    /**
+     * Custom focus animation properties
+     */
+    customFocusAnimation?: Record<string, any>;
+    /**
+     * Custom class names for different button states
+     */
+    stateClasses?: {
+        hover?: string;
+        focus?: string;
+        active?: string;
+        disabled?: string;
+    };
+    /**
+     * Custom class names for different variants and colors
+     */
+    customClasses?: {
+        [variant in ButtonVariant]?: {
+            [color in Color$d]?: string;
+        };
+    };
+    /**
+     * Custom size class mapping
+     */
+    customSizeClasses?: Record<Size, string>;
+    /**
+     * Whether to use animation on initial render
+     * @default true
+     */
+    useAnimation?: boolean;
+    /**
+     * Custom base classes to override defaults
+     */
+    baseClassName?: string;
+    /**
+     * Option to bypass default styling completely
+     * @default false
+     */
+    unstyled?: boolean;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
 }
 declare const Button: React$1.FC<ButtonProps>;
 
@@ -79,7 +158,7 @@ interface AlertProps extends BaseProps, WithChildren, ColorProps {
 }
 declare const Alert: React$1.FC<AlertProps>;
 
-interface AvatarProps extends BaseProps, SizeProps {
+interface AvatarProps extends BaseProps, SizeProps, HTMLMotionProps<'div'> {
     src?: string;
     alt?: string;
     initials?: string;
@@ -211,6 +290,8 @@ declare const Textarea: React$1.FC<TextareaProps>;
 interface ContainerProps extends BaseProps, WithChildren {
     fluid?: boolean;
     motionVariant?: keyof typeof motionVariants;
+    duration?: number;
+    loop?: boolean;
 }
 declare const Container: React$1.FC<ContainerProps>;
 
@@ -219,26 +300,43 @@ interface FlexProps extends BaseProps, WithChildren {
     justify?: 'start' | 'center' | 'end' | 'between' | 'around';
     align?: 'start' | 'center' | 'end' | 'stretch';
     wrap?: boolean;
+    motionVariant?: keyof typeof motionVariants;
+    duration?: number;
+    loop?: boolean;
 }
 declare const Flex: React$1.FC<FlexProps>;
 
 interface GridProps extends BaseProps, WithChildren {
     cols?: number;
     gap?: number;
+    motionVariant?: keyof typeof motionVariants;
+    duration?: number;
+    loop?: boolean;
 }
 declare const Grid: React$1.FC<GridProps>;
 
 interface ListProps extends BaseProps, WithChildren {
     as?: 'ul' | 'ol';
+    motionVariant?: keyof typeof motionVariants;
+    duration?: number;
+    loop?: boolean;
 }
 declare const List: React$1.FC<ListProps>;
 
-declare const ListItem: React$1.FC<BaseProps & WithChildren>;
+type MotionVariantKey$2 = keyof typeof motionVariants;
+interface ListItemProps extends BaseProps, WithChildren {
+    motionVariant?: MotionVariantKey$2;
+    duration?: number;
+    loop?: boolean;
+}
+declare const ListItem: React$1.FC<ListItemProps>;
 
 interface ModalProps extends BaseProps, WithChildren {
     isOpen: boolean;
     onClose: () => void;
     motionVariant?: keyof typeof motionVariants;
+    duration?: number;
+    loop?: boolean;
 }
 declare const Modal: React$1.FC<ModalProps>;
 
@@ -248,23 +346,107 @@ declare const ModalFooter: React$1.FC<BaseProps & WithChildren>;
 
 declare const ModalHeader: React$1.FC<BaseProps & WithChildren>;
 
+/**
+ * A fully customizable navigation link with motion and style props.
+ */
+type MotionVariantKey$1 = keyof typeof motionVariants;
 interface NavItemProps extends BaseProps, WithChildren {
+    /** Link destination */
     href: string;
+    /** Whether this item is active */
     active?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    motionVariant?: keyof typeof motionVariants;
+    /** Size key for padding and font size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Customize size classes */
+    sizeClasses?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>>;
+    /** Motion variant key */
+    motionVariant?: MotionVariantKey$1;
+    /** Animation duration override (seconds) */
+    duration?: number;
+    /** Loop the animation */
+    loop?: boolean;
+    /** Text color classes when inactive */
+    textColorClass?: string;
+    /** Text color classes on hover */
+    hoverTextColorClass?: string;
+    /** Text color classes when active */
+    activeTextColorClass?: string;
+    /** Border classes when active */
+    activeBorderClass?: string;
+    /** Scale on hover */
+    hoverScale?: number;
+    /** Scale on tap */
+    tapScale?: number;
 }
 declare const NavItem: React$1.FC<NavItemProps>;
 
+/**
+ * Fully customizable, responsive Navbar with mobile menu.
+ * All styling and behavior can be overridden via props.
+ */
 interface NavbarProps extends BaseProps, WithChildren {
+    /** Brand/logo element */
     brand?: React$1.ReactNode;
+    /** Tailwind class for navbar background */
+    bgColorClass?: string;
+    /** Tailwind class for navbar text */
+    textColorClass?: string;
+    /** Tailwind class for hover state on menu items */
+    hoverTextColorClass?: string;
+    /** Tailwind class for navbar shadow */
+    shadowClass?: string;
+    /** Container max-width wrapper class */
+    containerClassName?: string;
+    /** Class for desktop menu wrapper */
+    desktopMenuClassName?: string;
+    /** Class for mobile menu wrapper */
+    mobileMenuWrapperClassName?: string;
+    /** Class for individual mobile menu item */
+    mobileMenuItemClassName?: string;
+    /** Custom hamburger icon */
+    menuIcon?: React$1.ReactNode;
+    /** Custom close icon */
+    closeIcon?: React$1.ReactNode;
+    /** Framer Motion props for nav container */
+    navMotion?: Partial<MotionProps>;
+    /** Framer Motion props for mobile menu */
+    mobileMotion?: Partial<MotionProps>;
+    duration?: number;
+    loop?: boolean;
 }
 declare const Navbar: React$1.FC<NavbarProps>;
 
+/**
+ * A fully customizable offcanvas panel component.
+ */
 interface OffcanvasProps extends BaseProps, WithChildren {
+    /** Controls visibility of the panel */
     isOpen: boolean;
+    /** Callback when panel should close */
     onClose: () => void;
+    /** Which edge the panel should originate from */
     position?: 'left' | 'right' | 'top' | 'bottom';
+    /** Panel size utility classes (width/height) */
+    panelSizeClass?: string;
+    /** Background classes for the overlay layer */
+    overlayBgClass?: string;
+    /** Background classes for the panel content */
+    panelBgClass?: string;
+    /** Shadow classes for the panel */
+    panelShadowClass?: string;
+    /** z-index utility class */
+    zIndex?: string;
+    /** If true, clicking the overlay closes the panel */
+    closeOnOverlayClick?: boolean;
+    /** Duration of open/close animations in seconds */
+    duration?: number;
+    /** Custom close icon placed inside the panel */
+    customCloseIcon?: ReactNode;
+    /** Override motion props on the overlay */
+    overlayMotion?: Partial<MotionProps>;
+    /** Override motion props on the panel */
+    panelMotion?: Partial<MotionProps>;
+    loop?: boolean;
 }
 declare const Offcanvas: React$1.FC<OffcanvasProps>;
 
@@ -276,26 +458,40 @@ interface OffcanvasHeaderProps extends BaseProps, WithChildren {
 declare const OffcanvasHeader: React$1.FC<OffcanvasHeaderProps>;
 
 type Color$5 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface PaginationMotionProps extends Omit<HTMLMotionProps<'nav'>, 'color'> {
-}
-interface PaginationProps extends BaseProps, PaginationMotionProps {
+interface PaginationProps extends BaseProps {
     currentPage: number;
     totalPages: number;
     onPageChange: (page: number) => void;
     color?: Color$5;
     motionVariant?: keyof typeof motionVariants;
-    whileHoverAnimation?: keyof typeof motionVariants;
-    whileTapAnimation?: keyof typeof motionVariants;
-    whileFocusAnimation?: keyof typeof motionVariants;
 }
 declare const Pagination: React$1.FC<PaginationProps>;
 
+type MotionVariantKey = keyof typeof motionVariants;
 type Color$4 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-interface ProgressBarProps extends BaseProps, ColorProps {
+interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
+    /** Current value */
     value: number;
+    /** Maximum value */
     max?: number;
+    /** Semantic color key */
     color?: Color$4;
-    motionVariant?: keyof typeof motionVariants;
+    /** Override height utility class */
+    heightClass?: string;
+    /** Container background class */
+    containerBgClass?: string;
+    /** Bar background class override (falls back to color key) */
+    barBgClass?: string;
+    /** Motion variant key */
+    motionVariant?: MotionVariantKey;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Loop animation */
+    loop?: boolean;
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Label container class */
+    labelClassName?: string;
 }
 declare const ProgressBar: React$1.FC<ProgressBarProps>;
 

package/dist/index.js

@@ -483,13 +483,19 @@ const motionVariants = {
     },
 };
 
-const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', 
+const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', customVariants, customTransition, 
 // Standard Framer Motion props
 whileHover, whileTap, whileFocus, 
-// Additional ease animation props
-whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
-    const baseClasses = 'font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
-    const colorClasses = {
+// Additional animation props
+whileHoverAnimation, whileTapAnimation, whileFocusAnimation, customHoverAnimation, customTapAnimation, customFocusAnimation, 
+// Styling customization
+stateClasses = {}, customClasses = {}, customSizeClasses, baseClassName, unstyled = false, useAnimation = true, type = 'button', ...rest }) => {
+    // Default base classes if not unstyled and no custom base class provided
+    const defaultBaseClasses = 'font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
+    // Use either provided base class, default base class, or none if unstyled
+    const baseClasses = unstyled ? '' : (baseClassName || defaultBaseClasses);
+    // Default color classes for different variants
+    const defaultColorClasses = {
         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',
@@ -521,23 +527,63 @@ whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
             ghost: 'text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
         },
     };
-    const sizeClasses = {
+    // Default size classes
+    const defaultSizeClasses = {
         xs: 'px-2.5 py-1.5 text-xs',
         sm: 'px-3 py-2 text-sm',
         md: 'px-4 py-2 text-base',
         lg: 'px-4 py-2 text-lg',
         xl: 'px-6 py-3 text-xl',
     };
-    const computedWhileHover = whileHoverAnimation
-        ? getVariantVisible(whileHoverAnimation)
-        : whileHover;
-    const computedWhileTap = whileTapAnimation
-        ? getVariantVisible(whileTapAnimation)
-        : whileTap;
-    const computedWhileFocus = whileFocusAnimation
-        ? getVariantVisible(whileFocusAnimation)
-        : whileFocus;
-    return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, children));
+    // Determine the appropriate color classes
+    const getColorClasses = () => {
+        if (unstyled)
+            return '';
+        // Check if custom classes are provided for this variant and color combination
+        if (customClasses?.[variant]?.[color]) {
+            return customClasses[variant][color];
+        }
+        // If we have a predefined color class for this variant and color
+        if (defaultColorClasses[color]?.[variant]) {
+            return defaultColorClasses[color][variant];
+        }
+        // Fallback to primary if the combination doesn't exist
+        return defaultColorClasses.primary[variant] || '';
+    };
+    // Determine the appropriate size classes
+    const getSizeClasses = () => {
+        if (unstyled)
+            return '';
+        // Use custom size classes if provided, otherwise default
+        const sizeClassMap = customSizeClasses || defaultSizeClasses;
+        return sizeClassMap[size] || defaultSizeClasses.md;
+    };
+    // Determine state-specific classes
+    const getStateClasses = () => {
+        if (unstyled)
+            return '';
+        return disabled && stateClasses.disabled ? stateClasses.disabled : '';
+    };
+    // Compute all classes
+    const computedClasses = `
+    ${baseClasses}
+    ${getColorClasses()}
+    ${getSizeClasses()}
+    ${getStateClasses()}
+    ${className}
+  `.trim().replace(/\s+/g, ' ');
+    // Compute animation variants and states
+    const variants = customVariants || (useAnimation ? motionVariants[motionVariant] || {} : {});
+    // Compute hover animation
+    const computedWhileHover = customHoverAnimation ||
+        (whileHoverAnimation ? getVariantVisible(whileHoverAnimation) : whileHover);
+    // Compute tap animation
+    const computedWhileTap = customTapAnimation ||
+        (whileTapAnimation ? getVariantVisible(whileTapAnimation) : whileTap);
+    // Compute focus animation
+    const computedWhileFocus = customFocusAnimation ||
+        (whileFocusAnimation ? getVariantVisible(whileFocusAnimation) : whileFocus);
+    return (React.createElement(framerMotion.motion.button, { className: computedClasses, onClick: onClick, disabled: disabled, type: type, variants: variants, initial: useAnimation ? "hidden" : false, animate: useAnimation ? "visible" : false, transition: customTransition, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, children));
 };
 
 const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', whileHover, whileTap, whileFocus, whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
@@ -647,7 +693,7 @@ const Accordion = ({ className = '', items, color = 'primary', variant = 'solid'
         React.createElement(framerMotion.AnimatePresence, null, isOpen(index) && (React.createElement(framerMotion.motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", className: `px-4 py-2 border-t ${contentClassName}`, ...rest }, item.content))))))));
 };
 
-const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn', }) => {
+const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn', ...rest }) => {
     const colorClasses = {
         primary: 'bg-blue-100 text-blue-700',
         secondary: 'bg-gray-100 text-gray-700',
@@ -656,7 +702,7 @@ const Alert = ({ children, className = '', color = 'primary', onClose, motionVar
         warning: 'bg-yellow-100 text-yellow-700',
         info: 'bg-indigo-100 text-indigo-700',
     };
-    return (React.createElement(framerMotion.motion.div, { className: `p-4 rounded-md ${colorClasses[color]} ${className}`, role: "alert", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
+    return (React.createElement(framerMotion.motion.div, { className: `p-4 rounded-md ${colorClasses[color]} ${className}`, role: "alert", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", ...rest, 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" },
@@ -665,7 +711,7 @@ const Alert = ({ children, className = '', color = 'primary', onClose, motionVar
                     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 Avatar = ({ className = '', size = 'md', src, alt, initials, ...rest }) => {
     const sizeClasses = {
         xs: 'w-6 h-6 text-xs',
         sm: 'w-8 h-8 text-sm',
@@ -673,11 +719,11 @@ const Avatar = ({ className = '', size = 'md', src, alt, initials }) => {
         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))));
+    return (React.createElement(framerMotion.motion.div, { ...rest, 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
- }) => {
+...rest }) => {
     // Define the colors
     const colorStyles = {
         primary: '#E0F7FA', // bg-blue-100
@@ -710,10 +756,10 @@ const Badge = ({ children, className = '', color = 'primary', size = 'md', motio
         padding: sizeStyles[size].padding,
         fontSize: sizeStyles[size].fontSize,
     };
-    return (React.createElement(framerMotion.motion.span, { className: `inline-flex items-center font-medium rounded-full ${className}`, style: customStyle, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
+    return (React.createElement(framerMotion.motion.span, { className: `inline-flex items-center font-medium rounded-full ${className}`, style: customStyle, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest }, children));
 };
 
-const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = 'primary' }) => {
+const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = 'primary', ...rest }) => {
     // Color classes for breadcrumb
     const colorClasses = {
         primary: 'text-blue-600 hover:text-blue-800',
@@ -723,30 +769,30 @@ const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn', color = '
         warning: 'text-yellow-600 hover:text-yellow-800',
         info: 'text-blue-400 hover:text-blue-500',
     };
-    return (React.createElement(framerMotion.motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
+    return (React.createElement(framerMotion.motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest },
         React.createElement("ol", { className: "inline-flex items-center space-x-1 md:space-x-3" }, items.map((item, index) => (React.createElement("li", { key: index, className: "inline-flex items-center" },
             index > 0 && (React.createElement("svg", { className: "w-6 h-6 text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }))),
             React.createElement("a", { href: item.href, className: `ml-1 text-sm font-medium ${index === items.length - 1 ? 'text-gray-500 hover:text-gray-700' : colorClasses[color]}` }, item.label)))))));
 };
 
-const Card = ({ children, className = '', motionVariant = 'fadeIn' }) => {
-    return (React.createElement(framerMotion.motion.div, { className: `bg-white shadow rounded-lg overflow-hidden ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
+const Card = ({ children, className = '', motionVariant = 'fadeIn', ...rest }) => {
+    return (React.createElement(framerMotion.motion.div, { className: `bg-white shadow rounded-lg overflow-hidden ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest }, children));
 };
 
-const CardBody = ({ children, className = '', motionVariant = 'fadeIn' }) => {
-    return (React.createElement(framerMotion.motion.div, { className: `px-4 py-5 sm:p-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
+const CardBody = ({ children, className = '', motionVariant = 'fadeIn', ...rest }) => {
+    return (React.createElement(framerMotion.motion.div, { className: `px-4 py-5 sm:p-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest }, children));
 };
 
-const CardFooter = ({ children, className = '', motionVariant = 'fadeIn' }) => {
-    return (React.createElement(framerMotion.motion.div, { className: `px-4 py-4 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
+const CardFooter = ({ children, className = '', motionVariant = 'fadeIn', ...rest }) => {
+    return (React.createElement(framerMotion.motion.div, { className: `px-4 py-4 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest }, children));
 };
 
-const CardHeader = ({ children, className = '', motionVariant = 'fadeIn' }) => {
-    return (React.createElement(framerMotion.motion.div, { className: `px-4 py-5 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
+const CardHeader = ({ children, className = '', motionVariant = 'fadeIn' }, ...rest) => {
+    return (React.createElement(framerMotion.motion.div, { className: `px-4 py-5 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest }, children));
 };
 
-const Dropdown = ({ children, className = '', trigger, motionVariant = 'fadeIn' }) => {
+const Dropdown = ({ children, className = '', trigger, motionVariant = 'fadeIn' }, ...rest) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const dropdownRef = React.useRef(null);
     React.useEffect(() => {
@@ -763,14 +809,14 @@ const Dropdown = ({ children, className = '', trigger, motionVariant = 'fadeIn'
     return (React.createElement("div", { className: `relative inline-block text-left ${className}`, ref: dropdownRef },
         React.createElement("div", null,
             React.createElement("button", { type: "button", onClick: () => setIsOpen(prev => !prev) }, trigger),
-            React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement(framerMotion.motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children))))));
+            React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement(framerMotion.motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 }, ...rest }, 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 DropdownItem = ({ children, className = '', ...rest }) => {
+    return (React.createElement("a", { ...rest, href: "#", className: `block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${className}`, role: "menuitem" }, children));
 };
 
-const Checkbox = ({ className = '', label, checked, onChange, color = 'primary', motionVariant = 'fadeIn', }) => {
+const Checkbox = ({ className = '', label, checked, onChange, color = 'primary', motionVariant = 'fadeIn', ...rest }) => {
     const colorClasses = {
         primary: 'text-blue-600 focus:ring-blue-500 hover:text-blue-700',
         secondary: 'text-gray-600 focus:ring-gray-500 hover:text-gray-700',
@@ -779,14 +825,14 @@ const Checkbox = ({ className = '', label, checked, onChange, color = 'primary',
         warning: 'text-yellow-500 focus:ring-yellow-400 hover:text-yellow-600',
         info: 'text-blue-400 focus:ring-blue-300 hover:text-blue-500',
     };
-    return (React.createElement(framerMotion.motion.label, { className: `inline-flex items-center cursor-pointer select-none ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
+    return (React.createElement(framerMotion.motion.label, { className: `inline-flex items-center cursor-pointer select-none ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant], ...rest },
         React.createElement("input", { type: "checkbox", className: `form-checkbox h-5 w-5 rounded focus:ring-2 ${colorClasses[color]}`, checked: checked, onChange: onChange }),
         React.createElement("span", { className: `ml-2 font-medium ${colorClasses[color]}` }, label)));
 };
 
 const FileUpload = ({ className = '', onChange, accept, multiple, buttonColor = 'primary', // Default button color
 motionVariant = 'fadeIn', // Default motion variant
- }) => {
+...rest }) => {
     const fileInputRef = React.useRef(null);
     const handleClick = () => {
         fileInputRef.current?.click();
@@ -805,10 +851,10 @@ motionVariant = 'fadeIn', // Default motion variant
     };
     return (React.createElement(framerMotion.motion.div, { className: `flex items-center ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
         React.createElement("button", { type: "button", onClick: handleClick, className: `px-4 py-2 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 ${buttonColorClasses[buttonColor]}` }, "Choose File"),
-        React.createElement("input", { type: "file", ref: fileInputRef, onChange: handleChange, accept: accept, multiple: multiple, className: "hidden" })));
+        React.createElement("input", { ...rest, type: "file", ref: fileInputRef, onChange: handleChange, accept: accept, multiple: multiple, className: "hidden" })));
 };
 
-const Input = ({ className = '', size = 'md', type = 'text', placeholder, value, onChange, color = 'primary', textColor = 'black', }) => {
+const Input = ({ className = '', size = 'md', type = 'text', placeholder, value, onChange, color = 'primary', textColor = 'black', ...rest }) => {
     const sizeClasses = {
         xs: 'px-2 py-1 text-xs',
         sm: 'px-3 py-2 text-sm',
@@ -833,10 +879,10 @@ const Input = ({ className = '', size = 'md', type = 'text', placeholder, value,
         red: 'text-red-600',
     };
     return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
-        React.createElement("input", { type: type, className: `w-full rounded-md ${sizeClasses[size]} ${colorClasses[color]} ${textColorClasses[textColor]} ${className} focus:outline-none focus:ring-2`, placeholder: placeholder, value: value, onChange: onChange })));
+        React.createElement("input", { ...rest, type: type, className: `w-full rounded-md ${sizeClasses[size]} ${colorClasses[color]} ${textColorClasses[textColor]} ${className} focus:outline-none focus:ring-2`, placeholder: placeholder, value: value, onChange: onChange })));
 };
 
-const Radio = ({ className = '', label, name, value, checked, onChange, color = 'primary', size = 'md', motionVariant = 'fadeIn', }) => {
+const Radio = ({ className = '', label, name, value, checked, onChange, color = 'primary', size = 'md', motionVariant = 'fadeIn', ...rest }) => {
     const baseClasses = 'inline-flex items-center cursor-pointer';
     // Dynamic color classes
     const colorClasses = {
@@ -856,12 +902,12 @@ const Radio = ({ className = '', label, name, value, checked, onChange, color =
         xl: 'h-8 w-8',
     };
     return (React.createElement(framerMotion.motion.label, { className: `${baseClasses} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
-        React.createElement("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, className: `form-radio rounded-full border-2 focus:ring-2 ${colorClasses[color]} ${sizeClasses[size]}` }),
+        React.createElement("input", { ...rest, type: "radio", name: name, value: value, checked: checked, onChange: onChange, className: `form-radio rounded-full border-2 focus:ring-2 ${colorClasses[color]} ${sizeClasses[size]}` }),
         React.createElement("span", { className: `ml-2 font-medium ${colorClasses[color]}` }, label)));
 };
 
 const Select = ({ className = '', size = 'md', options, value, onChange, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
- }) => {
+...rest }) => {
     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',
@@ -879,11 +925,11 @@ const Select = ({ className = '', size = 'md', options, value, onChange, color =
         xl: 'px-5 py-4 text-xl',
     };
     return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
-        React.createElement("select", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, value: value, onChange: onChange }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))));
+        React.createElement("select", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, value: value, onChange: onChange, ...rest }, 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
- }) => {
+...rest }) => {
     const baseClasses = 'inline-flex items-center cursor-pointer';
     const colorClasses = {
         primary: 'bg-blue-600',
@@ -895,14 +941,14 @@ const Switch = ({ className = '', checked, onChange, label, color = 'primary', m
     };
     return (React.createElement(framerMotion.motion.label, { className: `${baseClasses} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
         React.createElement("div", { className: "relative" },
-            React.createElement("input", { type: "checkbox", className: "sr-only", checked: checked, onChange: (e) => onChange(e.target.checked) }),
+            React.createElement("input", { ...rest, 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
- }) => {
+...rest }) => {
     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',
@@ -920,15 +966,19 @@ const Textarea = ({ className = '', size = 'md', placeholder, value, onChange, r
         xl: 'px-5 py-4 text-xl',
     };
     return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
-        React.createElement("textarea", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange, rows: rows })));
+        React.createElement("textarea", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange, rows: rows, ...rest })));
 };
 
-const Container = ({ children, className = '', fluid = false, motionVariant = 'fadeIn' }) => {
+const Container = ({ children, className = '', fluid = false, motionVariant = 'fadeIn', duration = 0.3, loop = false, ...rest }) => {
     const containerClass = fluid ? 'w-full' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8';
-    return (React.createElement(framerMotion.motion.div, { className: `${containerClass} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden" }, children));
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.motion.div, { className: `${containerClass} ${className}`, variants: motionVariants[motionVariant], ...rest, initial: "hidden", animate: "visible", transition: { transition } }, children));
 };
 
-const Flex = ({ children, className = '', direction = 'row', justify = 'start', align = 'start', wrap = false, }) => {
+const Flex = ({ children, className = '', direction = 'row', justify = 'start', align = 'start', wrap = false, motionVariant = 'fadeIn', duration = 0.3, loop = false, ...rest }) => {
     const flexClass = `
     flex
     ${direction === 'col' ? 'flex-col' : 'flex-row'}
@@ -936,25 +986,45 @@ const Flex = ({ children, className = '', direction = 'row', justify = 'start',
     ${`items-${align}`}
     ${wrap ? 'flex-wrap' : 'flex-nowrap'}
   `;
-    return (React.createElement("div", { className: `${flexClass} ${className}` }, children));
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.motion.div, { variants: motionVariants[motionVariant], ...rest, initial: "hidden", animate: "visible", transition: { transition }, 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 Grid = ({ children, className = '', cols = 3, gap = 4, duration = 0.3, loop = false, motionVariant = 'fadeIn', ...rest }) => {
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.motion.div, { ...rest, initial: "hidden", animate: "visible", transition: { transition }, variants: motionVariants[motionVariant], className: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${cols} gap-${gap} ${className}` }, children));
 };
 
-const List = ({ children, className = '', as = 'ul' }) => {
+const List = ({ children, className = '', duration = 0.3, loop = false, as = 'ul', motionVariant = 'fadeIn', ...rest }) => {
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
     const Tag = as;
-    return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } },
+    return (React.createElement(framerMotion.motion.div, { initial: "hidden", animate: "visible", variants: motionVariants[motionVariant], transition: { transition }, ...rest },
         React.createElement(Tag, { className: `space-y-1 ${className}` }, children)));
 };
 
-const ListItem = ({ children, className = '' }) => {
-    return (React.createElement(framerMotion.motion.li, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
+const ListItem = ({ children, className = '', motionVariant = 'fadeIn', duration = 0.3, loop = false, ...rest }) => {
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.motion.li, { className: className, initial: "hidden", animate: "visible", variants: motionVariants[motionVariant], transition: { transition }, ...rest }, children));
 };
 
-const Modal = ({ children, className = '', isOpen, onClose, motionVariant = 'bounce' }) => {
-    return (React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement(framerMotion.motion.div, { className: "fixed inset-0 z-50 overflow-y-auto", variants: motionVariants[motionVariant] },
+const Modal = ({ children, className = '', isOpen, onClose, motionVariant = 'bounce', duration = 0.3, loop = false, ...rest }) => {
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement(framerMotion.motion.div, { className: "fixed inset-0 z-50 overflow-y-auto", ...rest, initial: "hidden", animate: "visible", transition: { transition }, variants: motionVariants[motionVariant] },
         React.createElement("div", { className: "flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" },
             React.createElement("div", { className: "fixed inset-0 transition-opacity", "aria-hidden": "true" },
                 React.createElement("div", { className: "absolute inset-0 bg-black opacity-45", onClick: onClose })),
@@ -975,35 +1045,55 @@ const ModalHeader = ({ children, className = '' }) => {
         React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900" }, children)));
 };
 
-const NavItem = ({ children, className = '', href, active = false, size = 'md', motionVariant = 'fadeIn', }) => {
-    const activeClass = active ? 'text-gray-900 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700';
-    const sizeClasses = {
+const NavItem = ({ href, children, className = '', active = false, size = 'md', sizeClasses, motionVariant = 'fadeIn', duration = 0.3, loop = false, textColorClass = 'text-gray-500', hoverTextColorClass = 'hover:text-gray-700', activeTextColorClass = 'text-gray-900', activeBorderClass = 'border-b-2 border-blue-500', hoverScale = 1.05, tapScale = 0.95, ...rest }) => {
+    // default size class map
+    const defaultSizeClasses = {
         xs: 'text-xs px-1 py-0.5',
         sm: 'text-sm px-2 py-1',
         md: 'text-base px-3 py-2',
         lg: 'text-lg px-4 py-3',
         xl: 'text-xl px-5 py-4',
     };
-    return (React.createElement(framerMotion.motion.a, { href: href, className: `inline-flex items-center ${sizeClasses[size]} ${activeClass} ${className}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, children));
+    // merged size classes
+    const mergedSizeClasses = {
+        ...defaultSizeClasses,
+        ...sizeClasses,
+    };
+    const baseClasses = `inline-flex items-center ${mergedSizeClasses[size]}`;
+    const stateClasses = active
+        ? `${activeTextColorClass} ${activeBorderClass}`
+        : `${textColorClass} ${hoverTextColorClass}`;
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.motion.a, { href: href, className: `${baseClasses} ${stateClasses} ${className}`, initial: "hidden", animate: "visible", variants: motionVariants[motionVariant], transition: { transition }, whileHover: { scale: hoverScale }, whileTap: { scale: tapScale }, ...rest }, children));
 };
 
-const Navbar = ({ children, className = '', brand }) => {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
-    return (React.createElement(framerMotion.motion.nav, { className: `bg-white shadow ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
-        React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" },
-            React.createElement("div", { className: "flex justify-between h-16" },
-                React.createElement("div", { className: "flex-shrink-0 flex items-center" }, brand),
-                React.createElement("div", { className: "hidden md:flex items-center space-x-4" }, children),
-                React.createElement("div", { className: "flex md:hidden items-center" },
-                    React.createElement("button", { type: "button", className: "text-gray-800 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400", onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen) }, isMobileMenuOpen ? (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }))) : (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 12h16M4 18h16" }))))))),
-        isMobileMenuOpen && (React.createElement("div", { className: "md:hidden bg-white shadow-md" },
-            React.createElement("div", { className: "space-y-2 px-4 py-2" }, React.Children.map(children, (child) => (React.createElement("div", { className: "text-gray-800 hover:text-gray-600" }, child))))))));
+const Navbar = ({ brand, children, className = '', bgColorClass = 'bg-white', textColorClass = 'text-gray-800', hoverTextColorClass = 'hover:text-gray-600', shadowClass = 'shadow', containerClassName = 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8', desktopMenuClassName = 'hidden md:flex items-center space-x-4', mobileMenuWrapperClassName = 'md:hidden bg-white shadow-md', mobileMenuItemClassName = 'block px-4 py-2', menuIcon, closeIcon, navMotion, mobileMotion, duration = 0.3, loop = false, ...rest }) => {
+    const [isMobileOpen, setMobileOpen] = React.useState(false);
+    const toggleMobile = () => setMobileOpen(prev => !prev);
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(framerMotion.motion.nav, { className: `flex items-center justify-between ${bgColorClass} ${shadowClass} ${className}`, initial: "hidden", animate: "visible", transition: { transition }, ...navMotion, ...rest },
+            React.createElement("div", { className: containerClassName + ' flex items-center justify-between h-16' },
+                React.createElement("div", { className: "flex-shrink-0" }, brand),
+                React.createElement("div", { className: desktopMenuClassName + ` ${textColorClass}` }, React.Children.map(children, child => (React.createElement("div", { className: `${hoverTextColorClass}` }, child)))),
+                React.createElement("div", { className: "md:hidden flex items-center" },
+                    React.createElement("button", { onClick: toggleMobile, "aria-label": isMobileOpen ? 'Close menu' : 'Open menu', className: `${textColorClass} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400` }, isMobileOpen
+                        ? closeIcon || (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))
+                        : menuIcon || (React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }))))))),
+        React.createElement(framerMotion.AnimatePresence, null, isMobileOpen && (React.createElement(framerMotion.motion.div, { className: mobileMenuWrapperClassName + ` ${textColorClass}`, initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, ...mobileMotion },
+            React.createElement("div", { className: "space-y-2 py-2" }, React.Children.map(children, child => (React.createElement("div", { className: `${mobileMenuItemClassName} ${hoverTextColorClass}` }, child)))))))));
 };
 
-const Offcanvas = ({ children, className = '', isOpen, onClose, position = 'left' }) => {
-    const positionClasses = {
+const Offcanvas = ({ isOpen, onClose, position = 'left', className = '', children, panelSizeClass = 'max-w-md', overlayBgClass = 'bg-black bg-opacity-75', panelBgClass = 'bg-white', panelShadowClass = 'shadow-xl', zIndex = 'z-50', closeOnOverlayClick = true, duration = 0.3, loop = false, customCloseIcon, overlayMotion, panelMotion, ...rest }) => {
+    const posClasses = {
         left: 'left-0 top-0 h-full',
         right: 'right-0 top-0 h-full',
         top: 'top-0 left-0 w-full',
@@ -1015,12 +1105,18 @@ const Offcanvas = ({ children, className = '', isOpen, onClose, position = 'left
         top: { y: '-100%' },
         bottom: { y: '100%' },
     };
-    return (React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement("div", { className: "fixed inset-0 z-50 overflow-hidden" },
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement(framerMotion.AnimatePresence, null, isOpen && (React.createElement("div", { className: `fixed inset-0 ${zIndex} overflow-hidden` },
         React.createElement("div", { className: "absolute inset-0 overflow-hidden" },
-            React.createElement(framerMotion.motion.div, { className: "absolute inset-0 bg-opacity-75 transition-opacity", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose }),
-            React.createElement("section", { className: `absolute ${positionClasses[position]} max-w-md` },
-                React.createElement(framerMotion.motion.div, { className: `h-full w-full transform transition ease-in-out duration-300 ${className}`, initial: variants[position], animate: { x: 0, y: 0 }, exit: variants[position], transition: { duration: 0.3 } },
-                    React.createElement("div", { className: "h-full bg-white shadow-xl" }, children))))))));
+            React.createElement(framerMotion.motion.div, { className: `absolute inset-0 ${overlayBgClass}`, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { transition }, onClick: closeOnOverlayClick ? onClose : undefined, ...overlayMotion }),
+            React.createElement("section", { className: `absolute ${posClasses[position]} ${panelSizeClass}` },
+                React.createElement(framerMotion.motion.div, { className: `h-full w-full transform ${className}`, initial: variants[position], animate: { x: 0, y: 0 }, exit: variants[position], transition: { transition }, ...panelMotion },
+                    React.createElement("div", { className: `${panelBgClass} ${panelShadowClass} h-full relative` },
+                        customCloseIcon && (React.createElement("button", { className: "absolute top-2 right-2", onClick: onClose, "aria-label": "Close" }, customCloseIcon)),
+                        children))))))));
 };
 
 const OffcanvasBody = ({ children, className = '' }) => {
@@ -1036,80 +1132,35 @@ const OffcanvasHeader = ({ children, className = '', onClose }) => {
                 React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))));
 };
 
-const Pagination = ({ className = '', currentPage, totalPages, onPageChange, color = 'primary', motionVariant = 'fadeIn', whileHoverAnimation, whileTapAnimation, whileFocusAnimation, whileHover, whileTap, whileFocus, ...rest }) => {
-    const [windowWidth, setWindowWidth] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
-    const [visiblePages, setVisiblePages] = React.useState([]);
-    React.useEffect(() => {
-        const handleResize = () => setWindowWidth(window.innerWidth);
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    React.useEffect(() => {
-        const generateVisiblePages = () => {
-            const maxMobilePages = 3;
-            const maxDesktopPages = 5;
-            const maxVisible = windowWidth < 768 ? maxMobilePages : maxDesktopPages;
-            if (totalPages <= maxVisible + 2)
-                return Array.from({ length: totalPages }, (_, i) => i + 1);
-            const startPage = Math.max(2, currentPage - Math.floor(maxVisible / 2));
-            const endPage = Math.min(totalPages - 1, currentPage + Math.floor(maxVisible / 2));
-            let pages = [1];
-            if (startPage > 2)
-                pages.push('...');
-            for (let i = startPage; i <= endPage; i++)
-                pages.push(i);
-            if (endPage < totalPages - 1)
-                pages.push('...');
-            pages.push(totalPages);
-            return pages;
-        };
-        setVisiblePages(generateVisiblePages());
-    }, [currentPage, totalPages, windowWidth]);
+const 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 dark:bg-blue-900 dark:hover:bg-blue-800',
-        secondary: 'text-gray-600 bg-gray-50 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600',
-        success: 'text-green-600 bg-green-50 hover:bg-green-100 hover:text-green-700 dark:bg-green-800 dark:hover:bg-green-700',
-        danger: 'text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700 dark:bg-red-800 dark:hover:bg-red-700',
-        warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700 dark:bg-yellow-800 dark:hover:bg-yellow-700',
-        info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700',
+        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',
     };
-    const computedWhileHover = whileHoverAnimation
-        ? getVariantVisible(whileHoverAnimation)
-        : whileHover;
-    const computedWhileTap = whileTapAnimation
-        ? getVariantVisible(whileTapAnimation)
-        : whileTap;
-    const computedWhileFocus = whileFocusAnimation
-        ? getVariantVisible(whileFocusAnimation)
-        : whileFocus;
-    return (React.createElement(framerMotion.motion.nav, { className: `flex justify-center ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", ...rest },
-        React.createElement("div", { className: "w-full overflow-x-auto" },
-            React.createElement("ul", { className: "flex items-center -space-x-px h-10" },
-                React.createElement("li", { className: "flex-shrink-0" },
-                    React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: `flex items-center px-3 py-2 sm:px-4 sm:py-2.5 text-sm sm:text-base 
-                border border-gray-300 rounded-l-lg transition-colors duration-200
-                ${colorClasses[color]} 
-                ${currentPage === 1 ? 'cursor-not-allowed opacity-50' : ''}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus },
-                        React.createElement("span", { className: "hidden sm:inline" }, "Previous"),
-                        React.createElement("span", { className: "sm:hidden" }, "Prev"))),
-                visiblePages.map((page, index) => (React.createElement("li", { key: `${page}-${index}`, className: "flex-shrink-0" }, page === '...' ? (React.createElement("span", { className: "px-3 py-2 text-gray-500 border border-gray-300 bg-white dark:bg-gray-800" }, "...")) : (React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(page), className: `min-w-[40px] px-2 py-1 sm:px-3 sm:py-2 text-sm sm:text-base 
-                    border border-gray-300 transition-colors duration-200
-                    ${currentPage === page
-                        ? 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100'
-                        : 'bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700'}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus }, page))))),
-                React.createElement("li", { className: "flex-shrink-0" },
-                    React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: `flex items-center px-3 py-2 sm:px-4 sm:py-2.5 text-sm sm:text-base 
-                border border-gray-300 rounded-r-lg transition-colors duration-200
-                ${colorClasses[color]} 
-                ${currentPage === totalPages ? 'cursor-not-allowed opacity-50' : ''}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus },
-                        React.createElement("span", { className: "hidden sm:inline" }, "Next"),
-                        React.createElement("span", { className: "sm:hidden" }, "Next")))))));
+    return (React.createElement(framerMotion.motion.nav, { className: `flex justify-center ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, variants: motionVariants[motionVariant] },
+        React.createElement("ul", { className: "flex items-center -space-x-px" },
+            React.createElement("li", null,
+                React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: `block px-3 py-2 ml-0 leading-tight border border-gray-300 rounded-l-lg ${colorClasses[color]} ${currentPage === 1 && 'cursor-not-allowed opacity-50'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, "Previous")),
+            pageNumbers.map((number) => (React.createElement("li", { key: number },
+                React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(number), className: `px-3 py-2 leading-tight border border-gray-300 ${colorClasses[color]} ${currentPage === number
+                        ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+                        : 'bg-white hover:bg-gray-100'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, number)))),
+            React.createElement("li", null,
+                React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: `block px-3 py-2 leading-tight border border-gray-300 rounded-r-lg ${colorClasses[color]} ${currentPage === totalPages && 'cursor-not-allowed opacity-50'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, "Next")))));
 };
 
-const ProgressBar = ({ className = '', color = 'primary', value, max = 100, motionVariant = 'fadeIn', // Default motion variant
- }) => {
+const ProgressBar = ({ className = '', value, max = 100, color = 'primary', heightClass = 'h-2.5', containerBgClass = 'bg-gray-200', barBgClass, motionVariant = 'fadeIn', duration = 0.5, loop = false, showLabel = false, labelClassName = 'text-xs font-medium text-gray-700 ml-2', ...rest }) => {
     const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-    const colorClasses = {
+    const defaultColorMap = {
         primary: 'bg-blue-600',
         secondary: 'bg-gray-600',
         success: 'bg-green-600',
@@ -1117,12 +1168,21 @@ const ProgressBar = ({ className = '', color = 'primary', value, max = 100, moti
         warning: 'bg-yellow-600',
         info: 'bg-indigo-600',
     };
-    return (React.createElement("div", { className: `w-full bg-gray-200 rounded-full h-2.5 ${className}` },
-        React.createElement(framerMotion.motion.div, { className: `h-2.5 rounded-full ${colorClasses[color]}`, style: { width: `${percentage}%` }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.5 }, variants: motionVariants[motionVariant], role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max })));
+    const barClass = barBgClass || defaultColorMap[color];
+    const transition = {
+        duration,
+        ...(loop ? { repeat: Infinity, repeatType: 'loop' } : {}),
+    };
+    return (React.createElement("div", { className: `flex items-center ${className}` },
+        React.createElement("div", { className: `relative w-full ${containerBgClass} rounded-full ${heightClass}` },
+            React.createElement(framerMotion.motion.div, { className: `absolute left-0 top-0 rounded-full ${heightClass} ${barClass}`, style: { width: `${percentage}%` }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: transition, variants: motionVariants[motionVariant], role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, ...rest })),
+        showLabel && (React.createElement("span", { className: labelClassName },
+            Math.round(percentage),
+            "%"))));
 };
 
 const Skeleton = ({ className = '', width = '100%', height = '20px', color = 'primary', motionVariant = 'fadeIn', // Default motion variant
- }) => {
+...rest }) => {
     const colorClasses = {
         primary: 'bg-blue-200',
         secondary: 'bg-gray-300',
@@ -1131,7 +1191,7 @@ const Skeleton = ({ className = '', width = '100%', height = '20px', color = 'pr
         warning: 'bg-yellow-200',
         info: 'bg-indigo-200',
     };
-    return (React.createElement(framerMotion.motion.div, { className: `animate-pulse rounded ${colorClasses[color]} ${className}`, style: { width, height }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }));
+    return (React.createElement(framerMotion.motion.div, { className: `animate-pulse rounded ${colorClasses[color]} ${className}`, style: { width, height }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", ...rest }));
 };
 
 const Slider = ({ className = '', min, max, value, onChange, step = 1, color = 'primary', // Default color set to primary
@@ -1319,7 +1379,7 @@ const Tooltip = ({ children, className = '', content, position = 'top', color =
         React.createElement(framerMotion.AnimatePresence, null, isVisible && (React.createElement(framerMotion.motion.div, { className: `absolute z-10 px-3 py-2 text-sm font-medium text-white rounded-lg shadow-sm ${positionClasses[position]} ${colorClasses[color]} ${className}`, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, variants: motionVariants[motionVariant] }, content)))));
 };
 
-const Heading = ({ children, className = '', as = 'h2', size = 'md' }) => {
+const Heading = ({ children, className = '', as = 'h2', size = 'md', ...rest }) => {
     const Tag = as;
     const sizeClasses = {
         xs: 'text-lg',
@@ -1329,10 +1389,10 @@ const Heading = ({ children, className = '', as = 'h2', size = 'md' }) => {
         xl: 'text-4xl',
     };
     return (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
-        React.createElement(Tag, { className: `font-bold ${sizeClasses[size]} ${className}` }, children)));
+        React.createElement(Tag, { ...rest, className: `font-bold ${sizeClasses[size]} ${className}` }, children)));
 };
 
-const Text = ({ children, className = '', size = 'md', weight = 'normal' }) => {
+const Text = ({ children, className = '', size = 'md', weight = 'normal', ...rest }) => {
     const sizeClasses = {
         xs: 'text-xs',
         sm: 'text-sm',
@@ -1346,7 +1406,7 @@ const Text = ({ children, className = '', size = 'md', weight = 'normal' }) => {
         semibold: 'font-semibold',
         bold: 'font-bold',
     };
-    return (React.createElement("p", { className: `${sizeClasses[size]} ${weightClasses[weight]} ${className}` }, children));
+    return (React.createElement("p", { ...rest, className: `${sizeClasses[size]} ${weightClasses[weight]} ${className}` }, children));
 };
 
 exports.Accordion = Accordion;

package/package.json

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