my-animated-components 1.5.0 → 1.5.2

package/dist/index.d.ts

@@ -10,18 +10,18 @@ interface WithChildren {
     children: React.ReactNode;
 }
 type Color$e = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
-type Size$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type Size$2 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface ColorProps {
     color?: Color$e;
 }
 interface SizeProps {
-    size?: Size$1;
+    size?: Size$2;
 }
 
 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;
+type Size$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+type MotionVariantKey$4 = keyof typeof motionVariants;
 interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
     /**
      * Visual style of the button
@@ -37,7 +37,7 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
      * Predefined motion variant from motionVariants for initial animation
      * @default 'fadeIn'
      */
-    motionVariant?: MotionVariantKey$3;
+    motionVariant?: MotionVariantKey$4;
     /**
      * Custom animation variants to override default motionVariants
      */
@@ -45,15 +45,15 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
     /**
      * Predefined motion variant for hover animation
      */
-    whileHoverAnimation?: MotionVariantKey$3;
+    whileHoverAnimation?: MotionVariantKey$4;
     /**
      * Predefined motion variant for tap animation
      */
-    whileTapAnimation?: MotionVariantKey$3;
+    whileTapAnimation?: MotionVariantKey$4;
     /**
      * Predefined motion variant for focus animation
      */
-    whileFocusAnimation?: MotionVariantKey$3;
+    whileFocusAnimation?: MotionVariantKey$4;
     /**
      * Custom transition for initial animation
      */
@@ -90,7 +90,7 @@ interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
     /**
      * Custom size class mapping
      */
-    customSizeClasses?: Record<Size, string>;
+    customSizeClasses?: Record<Size$1, string>;
     /**
      * Whether to use animation on initial render
      * @default true
@@ -323,9 +323,9 @@ interface ListProps extends BaseProps, WithChildren {
 }
 declare const List: React$1.FC<ListProps>;
 
-type MotionVariantKey$2 = keyof typeof motionVariants;
+type MotionVariantKey$3 = keyof typeof motionVariants;
 interface ListItemProps extends BaseProps, WithChildren {
-    motionVariant?: MotionVariantKey$2;
+    motionVariant?: MotionVariantKey$3;
     duration?: number;
     loop?: boolean;
 }
@@ -349,7 +349,7 @@ declare const ModalHeader: React$1.FC<BaseProps & WithChildren>;
 /**
  * A fully customizable navigation link with motion and style props.
  */
-type MotionVariantKey$1 = keyof typeof motionVariants;
+type MotionVariantKey$2 = keyof typeof motionVariants;
 interface NavItemProps extends BaseProps, WithChildren {
     /** Link destination */
     href: string;
@@ -360,7 +360,7 @@ interface NavItemProps extends BaseProps, WithChildren {
     /** Customize size classes */
     sizeClasses?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>>;
     /** Motion variant key */
-    motionVariant?: MotionVariantKey$1;
+    motionVariant?: MotionVariantKey$2;
     /** Animation duration override (seconds) */
     duration?: number;
     /** Loop the animation */
@@ -467,7 +467,7 @@ interface PaginationProps extends BaseProps {
 }
 declare const Pagination: React$1.FC<PaginationProps>;
 
-type MotionVariantKey = keyof typeof motionVariants;
+type MotionVariantKey$1 = keyof typeof motionVariants;
 type Color$4 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
     /** Current value */
@@ -483,7 +483,7 @@ interface ProgressBarProps extends BaseProps, ColorProps, MotionProps {
     /** Bar background class override (falls back to color key) */
     barBgClass?: string;
     /** Motion variant key */
-    motionVariant?: MotionVariantKey;
+    motionVariant?: MotionVariantKey$1;
     /** Animation duration in seconds */
     duration?: number;
     /** Loop animation */
@@ -611,4 +611,69 @@ type ImageEditorProps = {
 };
 declare const ImageEditor: ({ imageFile, onSave, onCancel, className }: ImageEditorProps) => React$1.ReactPortal;
 
-export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, ImageEditor, Imageeditor, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };
+type NavigationStyle = 'arrows' | 'dots' | 'thumbnails' | 'both' | 'arrows-dots' | 'none';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+type Direction = 'horizontal' | 'vertical';
+type MotionVariantKey = keyof typeof motionVariants;
+interface CarouselImage {
+    src: string;
+    alt: string;
+    title?: string;
+    description?: string;
+    thumbnail?: string;
+}
+interface CustomIcons {
+    prevIcon?: React$1.ReactNode;
+    nextIcon?: React$1.ReactNode;
+    playIcon?: React$1.ReactNode;
+    pauseIcon?: React$1.ReactNode;
+}
+interface CarouselProps extends BaseProps {
+    images: CarouselImage[];
+    motionVariant?: MotionVariantKey;
+    navigationStyle?: NavigationStyle;
+    size?: Size;
+    autoPlay?: number;
+    autoPlayDirection?: 'forward' | 'backward';
+    showPlayPause?: boolean;
+    loop?: boolean;
+    enableSwipe?: boolean;
+    swipeThreshold?: number;
+    direction?: Direction;
+    customVariants?: Variants;
+    transitionDuration?: number;
+    customTransition?: Transition;
+    customClasses?: {
+        container?: string;
+        imageWrapper?: string;
+        image?: string;
+        navigation?: string;
+        arrows?: string;
+        dots?: string;
+        thumbnails?: string;
+        overlay?: string;
+        playPause?: string;
+    };
+    customSizeClasses?: Record<Size, string>;
+    aspectRatio?: string;
+    showOverlay?: boolean;
+    overlayPosition?: 'bottom' | 'top' | 'center';
+    onSlideChange?: (index: number) => void;
+    initialSlide?: number;
+    baseClassName?: string;
+    unstyled?: boolean;
+    lazyLoad?: boolean;
+    preloadImages?: number;
+    customIcons?: CustomIcons;
+    thumbnailSize?: 'sm' | 'md' | 'lg';
+    arrowPosition?: 'inside' | 'outside';
+    dotStyle?: 'line' | 'circle' | 'square';
+    pauseOnHover?: boolean;
+    keyboard?: boolean;
+    slidesPerView?: number;
+    spaceBetween?: number;
+    centeredSlides?: boolean;
+}
+declare const Carousel: React$1.FC<CarouselProps>;
+
+export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Carousel, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, ImageEditor, Imageeditor, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };

package/dist/index.js

@@ -2821,6 +2821,172 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                 !isMobile && React.createElement("span", { style: { marginLeft: 6 } }, tab.label)))))))), document.body);
 };
 
+const Carousel = ({ images, navigationStyle = 'both', size = 'lg', autoPlay = 0, autoPlayDirection = 'forward', showPlayPause = true, loop = true, enableSwipe = true, swipeThreshold = 10000, direction = 'horizontal', motionVariant = 'fadeIn', customVariants, transitionDuration = 0.5, customTransition, customClasses = {}, customSizeClasses, aspectRatio = '16/9', showOverlay = true, overlayPosition = 'bottom', onSlideChange, initialSlide = 0, baseClassName, unstyled = false, className = '', lazyLoad = false, preloadImages = 2, customIcons, thumbnailSize = 'md', arrowPosition = 'inside', dotStyle = 'line', pauseOnHover = true, keyboard = true, slidesPerView = 1, spaceBetween = 0, centeredSlides = false, }) => {
+    const [currentIndex, setCurrentIndex] = React.useState(initialSlide);
+    const [isPlaying, setIsPlaying] = React.useState(autoPlay > 0);
+    const [dir, setDir] = React.useState(0);
+    const [loadedImages, setLoadedImages] = React.useState(new Set([initialSlide]));
+    const containerRef = React.useRef(null);
+    const autoPlayRef = React.useRef(null);
+    const defaultSizeClasses = {
+        xs: 'max-w-sm h-48',
+        sm: 'max-w-md h-64',
+        md: 'max-w-2xl h-96',
+        lg: 'max-w-4xl h-[32rem]',
+        xl: 'max-w-6xl h-[40rem]',
+        full: 'w-full h-screen',
+    };
+    const sizeClass = unstyled ? '' : (customSizeClasses?.[size] || defaultSizeClasses[size] || size);
+    const baseClasses = unstyled ? '' : (baseClassName || 'relative mx-auto overflow-hidden rounded-xl bg-gray-900');
+    const variants = customVariants || motionVariants[motionVariant || 'fadeIn'];
+    const paginate = React.useCallback((newDirection) => {
+        const nextIndex = currentIndex + newDirection;
+        if (loop) {
+            const wrappedIndex = ((nextIndex % images.length) + images.length) % images.length;
+            setCurrentIndex(wrappedIndex);
+        }
+        else {
+            if (nextIndex >= 0 && nextIndex < images.length) {
+                setCurrentIndex(nextIndex);
+            }
+        }
+        setDir(newDirection);
+    }, [currentIndex, images.length, loop]);
+    const goToSlide = React.useCallback((index) => {
+        const newDirection = index > currentIndex ? 1 : -1;
+        setDir(newDirection);
+        setCurrentIndex(index);
+    }, [currentIndex]);
+    React.useEffect(() => {
+        if (lazyLoad) {
+            const imagesToLoad = new Set(loadedImages);
+            imagesToLoad.add(currentIndex);
+            for (let i = 1; i <= preloadImages; i++) {
+                const nextIndex = (currentIndex + i) % images.length;
+                const prevIndex = (currentIndex - i + images.length) % images.length;
+                imagesToLoad.add(nextIndex);
+                if (loop)
+                    imagesToLoad.add(prevIndex);
+            }
+            setLoadedImages(imagesToLoad);
+        }
+        else {
+            setLoadedImages(new Set(images.map((_, i) => i)));
+        }
+    }, [currentIndex, lazyLoad, preloadImages, images.length, loop]);
+    React.useEffect(() => {
+        if (autoPlayRef.current) {
+            clearInterval(autoPlayRef.current);
+        }
+        if (autoPlay > 0 && isPlaying) {
+            autoPlayRef.current = setInterval(() => {
+                paginate(autoPlayDirection === 'forward' ? 1 : -1);
+            }, autoPlay);
+        }
+        return () => {
+            if (autoPlayRef.current) {
+                clearInterval(autoPlayRef.current);
+            }
+        };
+    }, [autoPlay, isPlaying, paginate, autoPlayDirection]);
+    React.useEffect(() => {
+        onSlideChange?.(currentIndex);
+    }, [currentIndex, onSlideChange]);
+    React.useEffect(() => {
+        if (!keyboard)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowLeft') {
+                paginate(-1);
+            }
+            else if (e.key === 'ArrowRight') {
+                paginate(1);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [keyboard, paginate]);
+    const handleDragEnd = (e, { offset, velocity }) => {
+        const swipe = Math.abs(offset.x) * velocity.x;
+        if (swipe < -swipeThreshold) {
+            paginate(1);
+        }
+        else if (swipe > swipeThreshold) {
+            paginate(-1);
+        }
+    };
+    const handleMouseEnter = () => {
+        if (pauseOnHover && autoPlay > 0) {
+            setIsPlaying(false);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (pauseOnHover && autoPlay > 0) {
+            setIsPlaying(true);
+        }
+    };
+    const showArrows = navigationStyle === 'arrows' || navigationStyle === 'both' || navigationStyle === 'arrows-dots';
+    const showDots = navigationStyle === 'dots' || navigationStyle === 'both' || navigationStyle === 'arrows-dots';
+    const showThumbnails = navigationStyle === 'thumbnails';
+    const DefaultPrevIcon = () => (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: "M15 19l-7-7 7-7" })));
+    const DefaultNextIcon = () => (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: "M9 5l7 7-7 7" })));
+    const DefaultPlayIcon = () => (React.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M8 5v14l11-7z" })));
+    const DefaultPauseIcon = () => (React.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })));
+    const thumbnailSizeClasses = {
+        sm: 'w-16 h-12',
+        md: 'w-20 h-16',
+        lg: 'w-24 h-20',
+    };
+    const dotStyleClasses = {
+        line: 'w-8 h-1',
+        circle: 'w-2 h-2 rounded-full',
+        square: 'w-2 h-2',
+    };
+    const overlayPositionClasses = {
+        bottom: 'bottom-0',
+        top: 'top-0',
+        center: 'top-1/2 -translate-y-1/2',
+    };
+    const transition = customTransition || {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: transitionDuration },
+        scale: { duration: transitionDuration },
+        rotateY: { duration: transitionDuration },
+        z: { duration: transitionDuration },
+    };
+    return (React.createElement("div", { ref: containerRef, className: `${baseClasses} ${sizeClass} ${className} ${customClasses.container || ''}`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        React.createElement("div", { className: `relative w-full h-full ${customClasses.imageWrapper || ''}`, style: { aspectRatio } },
+            React.createElement(framerMotion.AnimatePresence, { initial: false, custom: dir, mode: "wait" },
+                React.createElement(framerMotion.motion.div, { key: currentIndex, custom: dir, variants: variants, initial: "enter", animate: "center", exit: "exit", transition: transition, drag: enableSwipe ? "x" : false, dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleDragEnd, className: `absolute inset-0 ${customClasses.image || ''}` },
+                    lazyLoad ? (loadedImages.has(currentIndex) ? (React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "w-full h-full object-cover select-none", loading: "lazy", draggable: false })) : (React.createElement("div", { className: "w-full h-full bg-gray-800 animate-pulse flex items-center justify-center" },
+                        React.createElement("div", { className: "text-gray-400" }, "Loading...")))) : (React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "w-full h-full object-cover select-none", draggable: false })),
+                    showOverlay && (images[currentIndex].title || images[currentIndex].description) && (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.2 }, className: `absolute ${overlayPositionClasses[overlayPosition]} left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 ${customClasses.overlay || ''}` },
+                        images[currentIndex].title && (React.createElement("h3", { className: "text-white text-2xl font-bold mb-2" }, images[currentIndex].title)),
+                        images[currentIndex].description && (React.createElement("p", { className: "text-white/90 text-sm" }, images[currentIndex].description))))))),
+        showArrows && (React.createElement("div", { className: customClasses.navigation || '' },
+            React.createElement("button", { onClick: () => paginate(-1), disabled: !loop && currentIndex === 0, className: `absolute ${arrowPosition === 'outside' ? '-left-12' : 'left-4'} top-1/2 -translate-y-1/2 z-10 bg-white/90 backdrop-blur-sm rounded-full p-3 text-gray-900 hover:bg-white hover:scale-110 transition-all disabled:opacity-30 disabled:cursor-not-allowed shadow-lg ${customClasses.arrows || ''}`, "aria-label": "Previous slide" }, customIcons?.prevIcon || React.createElement(DefaultPrevIcon, null)),
+            React.createElement("button", { onClick: () => paginate(1), disabled: !loop && currentIndex === images.length - 1, className: `absolute ${arrowPosition === 'outside' ? '-right-12' : 'right-4'} top-1/2 -translate-y-1/2 z-10 bg-white/90 backdrop-blur-sm rounded-full p-3 text-gray-900 hover:bg-white hover:scale-110 transition-all disabled:opacity-30 disabled:cursor-not-allowed shadow-lg ${customClasses.arrows || ''}`, "aria-label": "Next slide" }, customIcons?.nextIcon || React.createElement(DefaultNextIcon, null)))),
+        autoPlay > 0 && showPlayPause && (React.createElement("button", { onClick: () => setIsPlaying(!isPlaying), className: `absolute top-4 right-4 z-10 bg-white/90 backdrop-blur-sm rounded-full p-2 text-gray-900 hover:bg-white hover:scale-110 transition-all shadow-lg ${customClasses.playPause || ''}`, "aria-label": isPlaying ? 'Pause' : 'Play' }, isPlaying
+            ? (customIcons?.pauseIcon || React.createElement(DefaultPauseIcon, null))
+            : (customIcons?.playIcon || React.createElement(DefaultPlayIcon, null)))),
+        showDots && (React.createElement("div", { className: `absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-2 ${customClasses.dots || ''}` }, images.map((_, index) => (React.createElement("button", { key: index, onClick: () => goToSlide(index), className: `${dotStyleClasses[dotStyle]} transition-all ${index === currentIndex
+                ? 'bg-white scale-110'
+                : 'bg-white/50 hover:bg-white/75'}`, "aria-label": `Go to slide ${index + 1}` }))))),
+        showThumbnails && (React.createElement("div", { className: `absolute bottom-0 left-0 right-0 z-10 bg-black/80 backdrop-blur-sm p-2 ${customClasses.thumbnails || ''}` },
+            React.createElement("div", { className: "flex gap-2 overflow-x-auto scrollbar-hide" }, images.map((image, index) => (React.createElement("button", { key: index, onClick: () => goToSlide(index), className: `flex-shrink-0 ${thumbnailSizeClasses[thumbnailSize]} rounded overflow-hidden transition-all ${index === currentIndex
+                    ? 'ring-2 ring-white scale-110'
+                    : 'opacity-60 hover:opacity-100'}`, "aria-label": `Go to slide ${index + 1}` },
+                React.createElement("img", { src: image.thumbnail || image.src, alt: image.alt, className: "w-full h-full object-cover", loading: "lazy" }))))))),
+        React.createElement("div", { className: "absolute bottom-4 right-4 z-10 text-white/80 text-sm bg-black/50 px-2 py-1 rounded" },
+            currentIndex + 1,
+            " / ",
+            images.length)));
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
@@ -2831,6 +2997,7 @@ exports.Card = Card;
 exports.CardBody = CardBody;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.Container = Container;
 exports.Dropdown = Dropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "description": "",
   "main": "dist/index.js",
@@ -61,7 +61,12 @@
     "reusable-components",
     "high-performance-ui",
     "typescript-support",
-    "my-animated-components"
+    "my-animated-components",
+    "carousel",
+    "image-editor",
+    "image-editor-component",
+    "carousel-component",
+    "image-carousel"
   ],
   "author": "",
   "license": "ISC",