{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "neon-gradient-card",
	"title": "Neon Gradient Card",
	"type": "registry:block",
	"description": "A card component with animated neon gradient borders and customizable colors, border size, and radius.",
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { onMount } from \"svelte\";\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\n\tinterface NeonColorsProps {\n\t\tfirstColor: string;\n\t\tsecondColor: string;\n\t}\n\n\tinterface NeonGradientCardProps {\n\t\tchildren?: Snippet;\n\t\tclass?: string;\n\t\tborderSize?: number;\n\t\tborderRadius?: number;\n\t\tneonColors?: NeonColorsProps;\n\t}\n\n\tlet {\n\t\tclass: className,\n\t\tchildren,\n\t\tborderSize = 2,\n\t\tborderRadius = 20,\n\t\tneonColors = {\n\t\t\tfirstColor: \"#ff00aa\",\n\t\t\tsecondColor: \"#00FFF1\",\n\t\t},\n\t\t...props\n\t}: NeonGradientCardProps = $props();\n\n\tlet containerRef: HTMLDivElement | null = $state(null);\n\tlet dimensions = $state({ width: 0, height: 0 });\n\n\tconst updateDimensions = () => {\n\t\tif (containerRef) {\n\t\t\tconst { offsetWidth, offsetHeight } = containerRef;\n\t\t\tdimensions = { width: offsetWidth, height: offsetHeight };\n\t\t}\n\t};\n\n\tonMount(() => {\n\t\tupdateDimensions();\n\t\twindow.addEventListener(\"resize\", updateDimensions);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"resize\", updateDimensions);\n\t\t};\n\t});\n\n\t$effect(() => {\n\t\tif (containerRef) {\n\t\t\tupdateDimensions();\n\t\t}\n\t});\n\n\tlet containerStyle = $derived(`\n    --border-size: ${borderSize}px;\n    --border-radius: ${borderRadius}px;\n    --neon-first-color: ${neonColors.firstColor};\n    --neon-second-color: ${neonColors.secondColor};\n    --card-width: ${dimensions.width}px;\n    --card-height: ${dimensions.height}px;\n    --card-content-radius: ${borderRadius - borderSize}px;\n    --pseudo-element-background-image: linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor});\n    --pseudo-element-width: ${dimensions.width + borderSize * 2}px;\n    --pseudo-element-height: ${dimensions.height + borderSize * 2}px;\n    --after-blur: ${dimensions.width / 3}px;\n  `);\n</script>\n\n<div\n\tbind:this={containerRef}\n\tstyle={containerStyle}\n\tclass={cn(\"relative z-10 size-full rounded-(--border-radius)\", className)}\n\t{...props}\n>\n\t<div\n\t\tclass={cn(\n\t\t\t\"relative size-full min-h-[inherit] rounded-(--card-content-radius) bg-gray-100 p-6\",\n\t\t\t\"before:absolute before:-top-(--border-size) before:-left-(--border-size) before:-z-10 before:block\",\n\t\t\t\"before:h-(--pseudo-element-height) before:w-(--pseudo-element-width) before:rounded-(--border-radius) before:content-['']\",\n\t\t\t\"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-size-[100%_200%]\",\n\t\t\t\"before:animate-background-position-spin\",\n\t\t\t\"after:absolute after:-top-(--border-size) after:-left-(--border-size) after:-z-10 after:block\",\n\t\t\t\"after:h-(--pseudo-element-height) after:w-(--pseudo-element-width) after:rounded-(--border-radius) after:blur-(--after-blur) after:content-['']\",\n\t\t\t\"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-size-[100%_200%] after:opacity-80\",\n\t\t\t\"after:animate-background-position-spin\",\n\t\t\t\"dark:bg-neutral-900\",\n\t\t\t\"wrap-break-word\"\n\t\t)}\n\t>\n\t\t{#if children}\n\t\t\t{@render children()}\n\t\t{/if}\n\t</div>\n</div>\n",
			"type": "registry:component",
			"target": "magic/neon-gradient-card/neon-gradient-card.svelte"
		},
		{
			"content": "import NeonGradientCard from \"./neon-gradient-card.svelte\";\nexport { NeonGradientCard };\n",
			"type": "registry:file",
			"target": "magic/neon-gradient-card/index.ts"
		}
	]
}