{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-gauge",
  "title": "Glass Gauge",
  "description": "A gauge component with glass morphism styling, suitable for displaying progress or performance metrics.",
  "files": [
    {
      "path": "registry/innovative/glass-gauge.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface GlassGaugeProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  max?: number\n  size?: \"sm\" | \"md\" | \"lg\"\n  showValue?: boolean\n  label?: string\n  colorScheme?: \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"gradient\"\n  animated?: boolean\n}\n\nconst sizes = {\n  sm: { size: 100, strokeWidth: 8, fontSize: \"text-lg\" },\n  md: { size: 150, strokeWidth: 10, fontSize: \"text-2xl\" },\n  lg: { size: 200, strokeWidth: 12, fontSize: \"text-4xl\" },\n}\n\nconst colorSchemes = {\n  cyan: { stroke: \"stroke-cyan-500\", glow: \"from-cyan-500/40 to-blue-500/40\" },\n  purple: { stroke: \"stroke-purple-500\", glow: \"from-purple-500/40 to-pink-500/40\" },\n  green: { stroke: \"stroke-emerald-500\", glow: \"from-emerald-500/40 to-teal-500/40\" },\n  orange: { stroke: \"stroke-orange-500\", glow: \"from-orange-500/40 to-amber-500/40\" },\n  gradient: { stroke: \"\", glow: \"from-cyan-500/40 via-blue-500/40 to-purple-500/40\" },\n}\n\nconst GlassGauge = React.forwardRef<HTMLDivElement, GlassGaugeProps>(\n  (\n    {\n      className,\n      value,\n      max = 100,\n      size = \"md\",\n      showValue = true,\n      label,\n      colorScheme = \"cyan\",\n      animated = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const [displayValue, setDisplayValue] = React.useState(0)\n    const config = sizes[size]\n    const colors = colorSchemes[colorScheme]\n    const percentage = Math.min(Math.max((value / max) * 100, 0), 100)\n\n    const radius = (config.size - config.strokeWidth) / 2\n    const circumference = radius * 2 * Math.PI\n    const strokeDashoffset = circumference - (percentage / 100) * circumference\n\n    React.useEffect(() => {\n      if (!animated) {\n        setDisplayValue(value)\n        return\n      }\n\n      const duration = 1000\n      const steps = 60\n      const increment = value / steps\n      let current = 0\n      let step = 0\n\n      const timer = setInterval(() => {\n        step++\n        current = Math.min(current + increment, value)\n        setDisplayValue(Math.round(current))\n\n        if (step >= steps) {\n          clearInterval(timer)\n          setDisplayValue(value)\n        }\n      }, duration / steps)\n\n      return () => clearInterval(timer)\n    }, [value, animated])\n\n    const gradientId = React.useId()\n\n    return (\n      <div ref={ref} className={cn(\"relative inline-flex flex-col items-center\", className)} {...props}>\n        {/* Glow effect */}\n        <div\n          className={cn(\"absolute rounded-full bg-linear-to-r blur-xl opacity-60\", colors.glow)}\n          style={{\n            width: config.size * 0.8,\n            height: config.size * 0.8,\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n          }}\n        />\n\n        <div className=\"relative\" style={{ width: config.size, height: config.size }}>\n          <svg width={config.size} height={config.size} className=\"transform -rotate-90\">\n            {/* Gradient definition */}\n            {colorScheme === \"gradient\" && (\n              <defs>\n                <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                  <stop offset=\"0%\" stopColor=\"#06b6d4\" />\n                  <stop offset=\"50%\" stopColor=\"#3b82f6\" />\n                  <stop offset=\"100%\" stopColor=\"#a855f7\" />\n                </linearGradient>\n              </defs>\n            )}\n\n            {/* Background track */}\n            <circle\n              cx={config.size / 2}\n              cy={config.size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={config.strokeWidth}\n              className=\"text-white/10\"\n            />\n\n            {/* Glass reflection on track */}\n            <circle\n              cx={config.size / 2}\n              cy={config.size / 2}\n              r={radius - config.strokeWidth / 2}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={1}\n              className=\"text-white/5\"\n            />\n\n            {/* Progress arc */}\n            <circle\n              cx={config.size / 2}\n              cy={config.size / 2}\n              r={radius}\n              fill=\"none\"\n              stroke={colorScheme === \"gradient\" ? `url(#${gradientId})` : undefined}\n              strokeWidth={config.strokeWidth}\n              strokeLinecap=\"round\"\n              strokeDasharray={circumference}\n              strokeDashoffset={strokeDashoffset}\n              className={cn(\"transition-all duration-1000 ease-out\", colorScheme !== \"gradient\" && colors.stroke)}\n            />\n          </svg>\n\n          {/* Center content */}\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n            {showValue && (\n              <span className={cn(\"font-bold text-white\", config.fontSize)}>\n                {displayValue}\n                <span className=\"text-white/40 text-sm\">%</span>\n              </span>\n            )}\n            {label && <span className=\"text-white/60 text-sm mt-1\">{label}</span>}\n          </div>\n        </div>\n      </div>\n    )\n  },\n)\nGlassGauge.displayName = \"GlassGauge\"\n\nexport { GlassGauge }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}