{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "marquee",
	"title": "Marquee",
	"type": "registry:block",
	"description": "A smooth scrolling marquee component with support for horizontal and vertical directions, pause on hover, and reverse animation.",
	"css": {
		"@keyframes marquee": {
			"from": {
				"transform": "translateX(0)"
			},
			"to": {
				"transform": "translateX(calc(-100% - var(--gap)))"
			}
		},
		"@keyframes marquee-vertical": {
			"from": {
				"transform": "translateY(0)"
			},
			"to": {
				"transform": "translateY(calc(-100% - var(--gap)))"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-marquee": "marquee var(--duration) linear infinite",
			"animate-marquee-vertical": "marquee-vertical var(--duration) linear infinite"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\n\tinterface MarqueeProps {\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t\treverse?: boolean;\n\t\tpauseOnHover?: boolean;\n\t\tvertical?: boolean;\n\t\trepeat?: number;\n\t\t[key: string]: any;\n\t}\n\n\tlet {\n\t\tchildren,\n\t\tclass: className = \"\",\n\t\treverse = false,\n\t\tpauseOnHover = false,\n\t\tvertical = false,\n\t\trepeat = 4,\n\t\t...rest\n\t}: MarqueeProps = $props();\n</script>\n\n<div\n\t{...rest}\n\tclass={cn(\n\t\t\"group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]\",\n\t\t{\n\t\t\t\"flex-row\": !vertical,\n\t\t\t\"flex-col\": vertical,\n\t\t},\n\t\tclassName\n\t)}\n>\n\t{#each Array(repeat).fill(0) as _, i (i)}\n\t\t<div\n\t\t\tclass={cn(\"flex shrink-0 justify-around gap-(--gap)\", {\n\t\t\t\t\"animate-marquee flex-row\": !vertical,\n\t\t\t\t\"animate-marquee-vertical flex-col\": vertical,\n\t\t\t\t\"group-hover:paused\": pauseOnHover,\n\t\t\t\t\"direction-[reverse]\": reverse,\n\t\t\t})}\n\t\t>\n\t\t\t{@render children?.()}\n\t\t</div>\n\t{/each}\n</div>\n",
			"type": "registry:component",
			"target": "magic/marquee/marquee.svelte"
		},
		{
			"content": "import Marquee from \"./marquee.svelte\";\nexport { Marquee };\n",
			"type": "registry:file",
			"target": "magic/marquee/index.ts"
		}
	]
}