{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "word-rotate",
	"title": "Word Rotate",
	"type": "registry:block",
	"description": "A component that cycles through an array of words with smooth fade and slide animations between transitions.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { onMount } from \"svelte\";\n\timport { motion, AnimatePresence, type MotionProps } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\n\ttype ElementType = \"div\" | \"span\" | \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n\tinterface WordRotateProps {\n\t\twords: string[];\n\t\tduration?: number;\n\t\tmotionProps?: MotionProps;\n\t\tclass?: string;\n\t\tas?: ElementType;\n\t}\n\n\tlet {\n\t\twords,\n\t\tduration = 2500,\n\t\tmotionProps = {\n\t\t\tinitial: { opacity: 0, y: -50 },\n\t\t\tanimate: { opacity: 1, y: 0 },\n\t\t\texit: { opacity: 0, y: 50 },\n\t\t\ttransition: { duration: 0.25, ease: \"easeOut\" },\n\t\t},\n\t\tclass: className,\n\t\tas = \"h1\",\n\t}: WordRotateProps = $props();\n\n\tlet MotionComponent = $derived(motion[as]);\n\n\tlet index = $state(0);\n\n\tonMount(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tindex = (index + 1) % words.length;\n\t\t}, duration);\n\n\t\t// Clean up interval on unmount\n\t\treturn () => clearInterval(interval);\n\t});\n</script>\n\n<!-- for some reason overflow hidden is not working - still in beta phase -->\n<!-- Original React implementation use mode=\"wait\" but the animation doesn't work properly in svelte  -->\n<!-- React Implmentaion : https://magicui.design/docs/components/word-rotate -->\n\n<div class=\"overflow-hidden py-2\">\n\t<!-- mode=\"popLayout\" initial={false} -->\n\n\t<AnimatePresence mode=\"wait\">\n\t\t{#key words[index]}\n\t\t\t<MotionComponent\n\t\t\t\tclass={cn(className)}\n\t\t\t\tinitial={motionProps.initial}\n\t\t\t\tanimate={motionProps.animate}\n\t\t\t\texit={motionProps.exit}\n\t\t\t\ttransition={motionProps.transition}\n\t\t\t>\n\t\t\t\t{words[index]}\n\t\t\t</MotionComponent>\n\t\t{/key}\n\t</AnimatePresence>\n</div>\n",
			"type": "registry:component",
			"target": "magic/word-rotate/word-rotate.svelte"
		},
		{
			"content": "export { default as WordRotate } from \"./word-rotate.svelte\";\nexport { default as RotatingTextContainer } from \"./rotating-text-container.svelte\";\nexport { default as RotatingText } from \"./rotating-text.svelte\";\nexport { useRotatingText } from \"./use-rotating-text-context.svelte\";\n\nexport type {\n\tRotatingTextContextType,\n\tUseIsInViewOptions,\n\tRotatingTextContainerProps,\n\tRotatingTextProps,\n} from \"./types\";\n",
			"type": "registry:file",
			"target": "magic/word-rotate/index.ts"
		}
	]
}