{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "title": "Progress Bar",
  "description": "A progress bar component.",
  "registryDependencies": ["https://dashboardblocks.com/r/use-in-view.json"],
  "files": [
    {
      "path": "registry/components/dashboardblocks/progress-bar.tsx",
      "content": "'use client'\n\nimport { useInView } from '@/registry/hooks/use-in-view'\nimport { useEffect, useState } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface ProgressBarProps {\n  className?: string\n  fillClassName?: string\n  percentage: number\n}\n\nexport const ProgressBar = ({\n  className,\n  percentage,\n  fillClassName,\n}: ProgressBarProps) => {\n  const [width, setWidth] = useState(0)\n  const { isInView, ref } = useInView()\n\n  const safePercentage = Number.isFinite(percentage) ? percentage : 0\n  const normalized = Math.min(100, Math.max(0, safePercentage))\n\n  useEffect(() => {\n    if (isInView) {\n      // Small delay to ensure the initial render happens at 0\n      const timer = requestAnimationFrame(() => {\n        setWidth(normalized)\n      })\n      return () => cancelAnimationFrame(timer)\n    }\n  }, [isInView, normalized])\n\n  return (\n    <div\n      ref={ref as React.RefObject<HTMLDivElement>}\n      className={cn('h-2 w-full rounded-full bg-muted', className)}\n    >\n      <div\n        className={cn(\n          'h-full rounded-full bg-primary transition-width! duration-1000 ease-out-expo',\n          fillClassName,\n        )}\n        style={{ width: `${width}%` }}\n      />\n    </div>\n  )\n}\n\nexport interface SegmentedProgressBarProps {\n  className?: string\n  segments: Array<{\n    color?: string\n    label?: string\n    value: number\n  }>\n  total: number\n}\n\nexport const SegmentedProgressBar = ({\n  className,\n  segments,\n  total,\n}: SegmentedProgressBarProps) => {\n  const [animatedMultiplier, setAnimatedMultiplier] = useState(0)\n  const { isInView, ref } = useInView()\n  const safeTotal = total > 0 ? total : 1\n\n  useEffect(() => {\n    if (isInView) {\n      // Small delay to ensure the initial render happens at 0\n      const timer = requestAnimationFrame(() => {\n        setAnimatedMultiplier(1)\n      })\n      return () => cancelAnimationFrame(timer)\n    }\n  }, [isInView])\n\n  return (\n    <div\n      ref={ref as React.RefObject<HTMLDivElement>}\n      className={cn('flex h-2 w-full overflow-hidden rounded-full bg-muted', className)}\n    >\n      {segments.map((segment, index) => {\n        const percentage = (segment.value / safeTotal) * 100\n        const animatedWidth = Math.max(0, percentage) * animatedMultiplier\n        return (\n          <div\n            key={segment.label || index}\n            className='h-full transition-width! duration-1000 ease-out-expo first:rounded-l-full last:rounded-r-full'\n            style={{\n              width: `${animatedWidth}%`,\n              backgroundColor: segment.color || 'hsl(var(--primary))',\n            }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}