{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list",
  "title": "AnimatedList",
  "description": "An animated list component to showcase your content.",
  "files": [
    {
      "path": "components/animated-list.tsx",
      "content": "\"use client\";\n\nimport React, {\n  ComponentPropsWithoutRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction AnimatedListItem({ children }: { children: React.ReactNode }) {\n  const animations: MotionProps = {\n    initial: { scale: 0, opacity: 0 },\n    animate: { scale: 1, opacity: 1, originY: 0 },\n    exit: { scale: 0, opacity: 0 },\n    transition: { type: \"spring\", stiffness: 350, damping: 40 },\n  };\n\n  return (\n    <motion.div {...animations} layout className=\"mx-auto w-full\">\n      {children}\n    </motion.div>\n  );\n}\n\nAnimatedListItem.displayName = \"AnimatedListItem\";\n\nexport { AnimatedListItem };\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode;\n  delay?: number;\n  reverse?: boolean;\n  loop?: boolean;\n}\n\nexport const AnimatedList = React.memo(\n  ({\n    children,\n    className,\n    delay = 1000,\n    reverse = true,\n    loop = false,\n    ...props\n  }: AnimatedListProps) => {\n    const [index, setIndex] = useState(0);\n    const childrenArray = useMemo(\n      () => React.Children.toArray(children),\n      [children]\n    );\n\n    useEffect(() => {\n      if (index < childrenArray.length - 1) {\n        const timeout = setTimeout(() => {\n          setIndex((prevIndex) => prevIndex + 1);\n        }, delay);\n\n        return () => clearTimeout(timeout);\n      } else if (loop) {\n        const timeout = setTimeout(() => {\n          setIndex(0);\n        }, 1000);\n\n        return () => clearTimeout(timeout);\n      }\n    }, [index, delay, childrenArray.length, loop]);\n\n    const itemsToShow = useMemo(() => {\n      const result = childrenArray.slice(0, index + 1);\n      return reverse ? result.reverse() : result;\n    }, [index, childrenArray, reverse]);\n\n    return (\n      <div\n        className={cn(`flex flex-col items-center gap-4`, className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {itemsToShow.map((item) => (\n            <AnimatedListItem key={(item as React.ReactElement).key}>\n              {item}\n            </AnimatedListItem>\n          ))}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nAnimatedList.displayName = \"AnimatedList\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}