{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ring",
  "title": "Ring",
  "description": "A ring component.",
  "registryDependencies": ["https://dashboardblocks.com/r/use-in-view.json"],
  "files": [
    {
      "path": "registry/components/dashboardblocks/ring.tsx",
      "content": "'use client'\n\nimport { useInView } from '@/registry/hooks/use-in-view'\nimport { type ReactNode, type RefObject, useEffect, useState } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface RingProps {\n  ariaLabel?: string\n  children?: ReactNode\n  className?: string\n  percentage: number\n  radius?: number\n  ringColor?: string\n  ringTrackColor?: string\n  strokeWidth?: number\n}\n\nexport const Ring = ({\n  ariaLabel,\n  children,\n  className = '',\n  percentage,\n  radius = 40,\n  ringColor = 'var(--color-primary)',\n  ringTrackColor = 'var(--color-muted)',\n  strokeWidth = 12,\n}: RingProps) => {\n  const [value, setValue] = useState(0)\n  const { isInView, ref } = useInView()\n  const circumference = 2 * Math.PI * radius\n  const strokeDashoffset = circumference - (value / 100) * circumference\n\n  useEffect(() => {\n    if (isInView) {\n      // Small delay to ensure the initial render happens at 0\n      const timer = requestAnimationFrame(() => {\n        setValue(percentage)\n      })\n      return () => cancelAnimationFrame(timer)\n    }\n  }, [isInView, percentage])\n\n  return (\n    <div\n      ref={ref as RefObject<HTMLDivElement>}\n      className={cn('relative shrink-0', className)}\n      aria-label={ariaLabel}\n      role={ariaLabel ? 'img' : undefined}\n    >\n      <svg className='h-full w-full -rotate-90' viewBox='0 0 100 100'>\n        <circle\n          cx='50'\n          cy='50'\n          r={radius}\n          fill='none'\n          stroke={ringTrackColor}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          cx='50'\n          cy='50'\n          r={radius}\n          fill='none'\n          stroke={ringColor}\n          strokeWidth={strokeWidth}\n          strokeLinecap='round'\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          className='transition-all duration-1000 ease-out-expo'\n        />\n      </svg>\n      <div className='absolute inset-0 flex items-center justify-center'>{children}</div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}