{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "animated-circular-progress-bar",
	"title": "Animated Circular Progress Bar",
	"type": "registry:block",
	"description": "A circular progress bar component with animated transitions between primary and secondary colors.",
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\n\tinterface AnimatedCircularProgressBarProps {\n\t\tmax?: number;\n\t\tmin?: number;\n\t\tvalue: number;\n\t\tgaugePrimaryColor: string;\n\t\tgaugeSecondaryColor: string;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tmax = 100,\n\t\tmin = 0,\n\t\tvalue = 0,\n\t\tgaugePrimaryColor,\n\t\tgaugeSecondaryColor,\n\t\tclass: className,\n\t}: AnimatedCircularProgressBarProps = $props();\n\n\tconst circumference = 2 * Math.PI * 45;\n\tconst percentPx = circumference / 100;\n\n\tconst currentPercent = $derived(Math.round(((value - min) / (max - min)) * 100));\n</script>\n\n<div\n\tclass={cn(\"relative size-40 text-2xl font-semibold\", className)}\n\tstyle=\"\n    --circle-size: 100px;\n    --circumference: {circumference};\n    --percent-to-px: {percentPx}px;\n    --gap-percent: 5;\n    --offset-factor: 0;\n    --transition-length: 1s;\n    --transition-step: 200ms;\n    --delay: 0s;\n    --percent-to-deg: 3.6deg;\n    transform: translateZ(0);\n  \"\n>\n\t<svg fill=\"none\" class=\"size-full\" stroke-width=\"2\" viewBox=\"0 0 100 100\">\n\t\t{#if currentPercent <= 90 && currentPercent >= 0}\n\t\t\t<circle\n\t\t\t\tcx=\"50\"\n\t\t\t\tcy=\"50\"\n\t\t\t\tr=\"45\"\n\t\t\t\tstroke-width=\"10\"\n\t\t\t\tstroke-dashoffset=\"0\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\tclass=\"opacity-100\"\n\t\t\t\tstyle=\"\n          stroke: {gaugeSecondaryColor};\n          --stroke-percent: {90 - currentPercent};\n          --offset-factor-secondary: calc(1 - var(--offset-factor));\n          stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference);\n          transform: rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1);\n          transition: all var(--transition-length) ease var(--delay);\n          transform-origin: calc(var(--circle-size) / 2) calc(var(--circle-size) / 2);\n        \"\n\t\t\t/>\n\t\t{/if}\n\t\t<circle\n\t\t\tcx=\"50\"\n\t\t\tcy=\"50\"\n\t\t\tr=\"45\"\n\t\t\tstroke-width=\"10\"\n\t\t\tstroke-dashoffset=\"0\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-linejoin=\"round\"\n\t\t\tclass=\"opacity-100\"\n\t\t\tstyle=\"\n        stroke: {gaugePrimaryColor};\n        --stroke-percent: {currentPercent};\n        stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference);\n        transition: var(--transition-length) ease var(--delay), stroke var(--transition-length) ease var(--delay);\n        transition-property: stroke-dasharray, transform;\n        transform: rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)));\n        transform-origin: calc(var(--circle-size) / 2) calc(var(--circle-size) / 2);\n      \"\n\t\t/>\n\t</svg>\n\t<span\n\t\tdata-current-value={currentPercent}\n\t\tclass=\"animate-in fade-in absolute inset-0 m-auto size-fit delay-(--delay) duration-(--transition-length) ease-linear\"\n\t>\n\t\t{currentPercent}\n\t</span>\n</div>\n",
			"type": "registry:component",
			"target": "magic/animated-circular-progress-bar/animated-circular-progress-bar.svelte"
		},
		{
			"content": "import AnimatedCircularProgressBar from \"./animated-circular-progress-bar.svelte\";\nexport { AnimatedCircularProgressBar };\n",
			"type": "registry:file",
			"target": "magic/animated-circular-progress-bar/index.ts"
		}
	]
}