{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "number-ticker",
	"title": "Number Ticker",
	"type": "registry:ui",
	"description": "An animated number counter using spring physics.",
	"dependencies": [
		"svelte/motion"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport { spring } from 'svelte/motion';\n\timport { onMount } from 'svelte';\n\n\tlet {\n\t\tvalue = 0,\n\t\tinitial = 0,\n\t\tduration = 1000,\n\t\tclass: className\n\t}: {\n\t\tvalue: number;\n\t\tinitial?: number;\n\t\tduration?: number;\n\t\tclass?: string;\n\t} = $props();\n\n\tconst count = spring(initial, {\n\t\tstiffness: 0.1,\n\t\tdamping: 0.4\n\t});\n\n\tlet element: HTMLSpanElement;\n\tlet isVisible = false;\n\n\tonMount(() => {\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tif (entries[0].isIntersecting && !isVisible) {\n\t\t\t\t\tisVisible = true;\n\t\t\t\t\tcount.set(value);\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ threshold: 0.1 }\n\t\t);\n\n\t\tif (element) observer.observe(element);\n\n\t\treturn () => observer.disconnect();\n\t});\n\n\tlet displayValue = $derived(Math.round($count).toLocaleString('en-US'));\n</script>\n\n<span bind:this={element} class={cn('tabular-nums tracking-tight text-foreground', className)}>\n\t{displayValue}\n</span>\n",
			"type": "registry:ui",
			"target": "number-ticker/number-ticker.svelte"
		},
		{
			"content": "import NumberTicker from \"./number-ticker.svelte\";\r\nexport { NumberTicker };",
			"type": "registry:ui",
			"target": "number-ticker/index.ts"
		}
	]
}