{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "animated-theme-toggler",
	"title": "Animated Theme Toggler",
	"type": "registry:block",
	"description": "A smooth animated theme toggler that uses the View Transition API to create a circular reveal effect when switching between light and dark themes.",
	"devDependencies": [
		"@lucide/svelte@^0.561.0"
	],
	"css": {
		"::view-transition-old(root), ::view-transition-new(root)": {
			"animation": "none",
			"mix-blend-mode": "normal"
		}
	},
	"cssVars": {},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { onMount } from \"svelte\";\n\timport { Moon, Sun } from \"@lucide/svelte\";\n\timport { cn } from \"$UTILS$\";\n\n\tinterface AnimatedThemeTogglerProps {\n\t\tclass?: string;\n\t\tduration?: number;\n\t}\n\n\tlet { class: className, duration = 400, ...props }: AnimatedThemeTogglerProps = $props();\n\n\tlet isDark = $state(false);\n\tlet buttonRef: HTMLButtonElement | null = $state(null);\n\n\tonMount(() => {\n\t\tconst updateTheme = () => {\n\t\t\tisDark = document.documentElement.classList.contains(\"dark\");\n\t\t};\n\n\t\tupdateTheme();\n\n\t\tconst observer = new MutationObserver(updateTheme);\n\t\tobserver.observe(document.documentElement, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: [\"class\"],\n\t\t});\n\n\t\treturn () => observer.disconnect();\n\t});\n\n\tconst toggleTheme = async () => {\n\t\tif (!buttonRef) return;\n\n\t\t// Check if View Transition API is supported\n\t\tif (!document.startViewTransition) {\n\t\t\t// Fallback for browsers that don't support View Transition API\n\t\t\tconst newTheme = !isDark;\n\t\t\tisDark = newTheme;\n\t\t\tdocument.documentElement.classList.toggle(\"dark\");\n\t\t\tlocalStorage.setItem(\"theme\", newTheme ? \"dark\" : \"light\");\n\t\t\treturn;\n\t\t}\n\n\t\tawait document.startViewTransition(() => {\n\t\t\tconst newTheme = !isDark;\n\t\t\tisDark = newTheme;\n\t\t\tdocument.documentElement.classList.toggle(\"dark\");\n\t\t\tlocalStorage.setItem(\"theme\", newTheme ? \"dark\" : \"light\");\n\t\t}).ready;\n\n\t\tconst { top, left, width, height } = buttonRef.getBoundingClientRect();\n\t\tconst x = left + width / 2;\n\t\tconst y = top + height / 2;\n\t\tconst maxRadius = Math.hypot(\n\t\t\tMath.max(left, window.innerWidth - left),\n\t\t\tMath.max(top, window.innerHeight - top)\n\t\t);\n\n\t\tdocument.documentElement.animate(\n\t\t\t{\n\t\t\t\tclipPath: [\n\t\t\t\t\t`circle(0px at ${x}px ${y}px)`,\n\t\t\t\t\t`circle(${maxRadius}px at ${x}px ${y}px)`,\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration,\n\t\t\t\teasing: \"ease-in-out\",\n\t\t\t\tpseudoElement: \"::view-transition-new(root)\",\n\t\t\t}\n\t\t);\n\t};\n</script>\n\n<button bind:this={buttonRef} onclick={toggleTheme} class={cn(className)} {...props}>\n\t{#if isDark}\n\t\t<Sun />\n\t{:else}\n\t\t<Moon />\n\t{/if}\n\t<span class=\"sr-only\">Toggle theme</span>\n</button>\n",
			"type": "registry:component",
			"target": "magic/animated-theme-toggler/animated-theme-toggler.svelte"
		},
		{
			"content": "import AnimatedThemeToggler from \"./animated-theme-toggler.svelte\";\nexport { AnimatedThemeToggler };\n",
			"type": "registry:file",
			"target": "magic/animated-theme-toggler/index.ts"
		}
	]
}