{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "animated-list",
	"title": "Animated List",
	"type": "registry:block",
	"description": "A component that animates list items with smooth layout transitions, revealing items one by one from top to bottom.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { onMount } from \"svelte\";\n\timport { motion, AnimatePresence, createLayoutMotion } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\n\tinterface AnimatedListProps<T> {\n\t\titems: T[];\n\t\tclass?: string;\n\t\tdelay?: number;\n\t\tchildren: Snippet<[T, number]>;\n\t}\n\n\ttype AnimatedListPropsGeneric = AnimatedListProps<any>;\n\n\tlet { items, class: className, delay = 1000, children }: AnimatedListPropsGeneric = $props();\n\n\t// Create layout motion for smooth layout animations\n\tconst layout = createLayoutMotion(motion);\n\tconst update = layout.update;\n\n\t// Use a mutable state array instead of derived\n\tlet itemsToShow = $state<any[]>([]);\n\n\tonMount(() => {\n\t\t// Initialize with first item\n\t\tupdate.with(() => {\n\t\t\titemsToShow = [items[0]];\n\t\t})();\n\n\t\tlet currentIndex = 0;\n\n\t\tconst interval = setInterval(() => {\n\t\t\tif (currentIndex < items.length - 1) {\n\t\t\t\tcurrentIndex++;\n\t\t\t\t// Use update.with to track layout changes\n\t\t\t\tupdate.with(() => {\n\t\t\t\t\t// Add new item at the beginning (top)\n\t\t\t\t\titemsToShow = [items[currentIndex], ...itemsToShow];\n\t\t\t\t})();\n\t\t\t}\n\t\t}, delay);\n\n\t\treturn () => clearInterval(interval);\n\t});\n</script>\n\n<div class={cn(\"flex flex-col items-center gap-4\", className)}>\n\t<AnimatePresence mode=\"popLayout\">\n\t\t{#each itemsToShow as item, i (item.id)}\n\t\t\t<layout.div\n\t\t\t\tinitial={{ scale: 0, opacity: 0, y: -8 }}\n\t\t\t\tanimate={{\n\t\t\t\t\tscale: 1,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\ty: 0,\n\t\t\t\t\ttransition: { type: \"spring\", stiffness: 500, damping: 30 },\n\t\t\t\t}}\n\t\t\t\texit={{\n\t\t\t\t\tscale: 0,\n\t\t\t\t\topacity: 0,\n\t\t\t\t\ty: 8,\n\t\t\t\t\ttransition: { duration: 0.18 },\n\t\t\t\t}}\n\t\t\t\tlayout\n\t\t\t\tlayoutDependency={itemsToShow.length}\n\t\t\t\tclass=\"mx-auto w-full\"\n\t\t\t>\n\t\t\t\t{@render children(item, i)}\n\t\t\t</layout.div>\n\t\t{/each}\n\t</AnimatePresence>\n</div>\n",
			"type": "registry:component",
			"target": "magic/animated-list/animated-list.svelte"
		},
		{
			"content": "import AnimatedList from \"./animated-list.svelte\";\nexport { AnimatedList };\n",
			"type": "registry:file",
			"target": "magic/animated-list/index.ts"
		}
	]
}