{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gauge",
  "title": "Gauge",
  "description": "A customizable semi-circular gauge component for visualizing metrics and performance scores.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/gauge/gauge.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport {\n  LazyMotion,\n  domAnimation,\n  m,\n  useMotionValue,\n  useTransform,\n  animate,\n} from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface GaugeProps {\n  value?: number;\n  min?: number;\n  max?: number;\n  size?: number; // Diameter of the gauge\n  gap?: number; // Gap between bars in degrees\n  thickness?: number; // Thickness of the bars\n  activeColor?: string;\n  inactiveColor?: string;\n  showValue?: boolean;\n  label?: string;\n  className?: string;\n  delay?: number;\n}\n\nconst Gauge = ({\n  value = 70,\n  min = 0,\n  max = 100,\n  size = 400,\n  gap = 4,\n  thickness = 10,\n  activeColor = \"bg-blue-600\",\n  inactiveColor = \"bg-blue-100\",\n  showValue = true,\n  label = \"Performance\",\n  className,\n  delay = 25,\n}: GaugeProps) => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  const count = useMotionValue(0);\n  const rounded = useTransform(count, (latest) => Math.round(latest));\n\n  const [dims, setDims] = useState({ size, thickness });\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsMounted(true);\n    }, 100); // Small delay to ensure initial render is processed\n    return () => clearTimeout(timer);\n  }, []);\n\n  const { size: currentSize, thickness: currentThickness } = dims;\n  const radius = currentSize / 2;\n  // Calculate percentage for display\n  const percentage = Math.round(((value - min) / (max - min)) * 100);\n\n  const totalBars = Math.floor(180 / gap);\n\n  useEffect(() => {\n    if (isMounted) {\n      const animation = animate(count, percentage, {\n        duration: (totalBars * delay) / 1000,\n      });\n      return animation.stop;\n    }\n  }, [isMounted, percentage, totalBars, delay, count]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth < 640) {\n        setDims({ size: 280, thickness: 6 });\n      } else {\n        setDims({ size, thickness });\n      }\n    };\n\n    handleResize();\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, [size, thickness]);\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div\n        className={cn(\"relative flex justify-center items-center\", className)}\n        style={{ width: currentSize, height: currentSize / 2 }}\n      >\n        <m.div className=\"absolute bottom-0 left-1/2\">\n          {Array.from({ length: totalBars }).map((_, index) => {\n            const barRotation = index * gap - 90;\n            const isActive =\n              isMounted && index < (percentage / 100) * totalBars;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"absolute rounded-full transition-colors duration-300\",\n                  isActive ? `${activeColor} ` : inactiveColor\n                )}\n                style={{\n                  width: currentThickness,\n                  height: currentSize / 8, // Proportional height\n                  left: \"50%\",\n                  top: \"50%\",\n                  transform: `translate(-50%, -50%) rotate(${barRotation}deg) translateY(-${radius}px)`,\n                  transitionDelay: `${index * delay}ms`,\n                }}\n              />\n            );\n          })}\n\n          {showValue && (\n            <div\n              className=\"absolute left-1/2 -translate-x-1/2 flex flex-col items-center\"\n              style={{\n                bottom: 0, // Align to bottom of the container\n              }}\n            >\n              <h2 className=\"flex text-black dark:text-white font-bold leading-none text-[32px] md:text-[48px]\">\n                <m.span>{rounded}</m.span>%\n              </h2>\n              {label && (\n                <p className=\"text-black dark:text-white font-medium font-sm md:font-base\">\n                  {label}\n                </p>\n              )}\n            </div>\n          )}\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport default Gauge;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}