xlibs-components/dist/components/magicui/animated-list.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from '../../lib/utils.js';
import { motion } from "framer-motion";
import { useEffect, useRef, useState } from "react";
export function AnimatedList({ children, className, duration = 0.5, stagger = 0.1, }) {
    const [isVisible, setIsVisible] = useState(false);
    const containerRef = useRef(null);
    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setIsVisible(true);
            }
        }, { threshold: 0.1 });
        if (containerRef.current) {
            observer.observe(containerRef.current);
        }
        return () => observer.disconnect();
    }, []);
    const childrenArray = Array.isArray(children) ? children : [children];
    return (_jsx("div", { ref: containerRef, className: cn("space-y-2", className), children: childrenArray.map((child, index) => (_jsx(motion.div, { initial: { opacity: 0, y: 20 }, animate: isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }, transition: {
                duration,
                delay: index * stagger,
                ease: "easeOut",
            }, children: child }, index))) }));
}