{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "spotlight-card",
	"title": "Spotlight Card",
	"type": "registry:ui",
	"description": "A card that reveals a radial gradient background on hover.",
	"registryDependencies": [
		"card"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Props = HTMLAttributes<HTMLDivElement> & {\n\t\tchildren: Snippet;\n\t\tcolor?: string;\n\t\tsize?: number;\n\t};\n\n\tlet { class: className, children, color, size = 350, ...rest }: Props = $props();\n\n\tlet div: HTMLDivElement;\n\tlet opacity = $state(0);\n\tlet position = $state({ x: 0, y: 0 });\n\n\tconst handleMouseMove = (e: MouseEvent) => {\n\t\tif (!div) return;\n\t\tconst rect = div.getBoundingClientRect();\n\t\tposition = { x: e.clientX - rect.left, y: e.clientY - rect.top };\n\t};\n</script>\n\n<div\n\tbind:this={div}\n\tonmousemove={handleMouseMove}\n\tonmouseenter={() => (opacity = 1)}\n\tonmouseleave={() => (opacity = 0)}\n\tclass={cn(\n\t\t'relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm',\n\t\tclassName\n\t)}\n\t{...rest}\n>\n\t<div\n\t\tclass={cn(\n\t\t\t'pointer-events-none absolute inset-0 transition-opacity duration-300',\n\t\t\t!color && 'bg-black/10 dark:bg-white/10'\n\t\t)}\n\t\tstyle=\"\n            opacity: {opacity};\n            {color ? `background-color: ${color};` : ''}\n            mask-image: radial-gradient(\n                {size}px circle at {position.x}px {position.y}px,\n                black,\n                transparent\n            );\n            -webkit-mask-image: radial-gradient(\n                {size}px circle at {position.x}px {position.y}px,\n                black,\n                transparent\n            );\n        \"\n\t></div>\n\n\t<div class=\"relative h-full\">\n\t\t{@render children()}\n\t</div>\n</div>\n",
			"type": "registry:ui",
			"target": "spotlight-card/spotlight-card.svelte"
		},
		{
			"content": "import SpotlightCard from \"./spotlight-card.svelte\";\r\nexport { SpotlightCard };",
			"type": "registry:ui",
			"target": "spotlight-card/index.ts"
		}
	]
}