{
  "name": "scroll-progress-basic-2",
  "type": "registry:ui",
  "componentName": "scroll-progress",
  "description": "Alternative scroll progress indicator with different styling.",
  "files": [
    {
      "path": "scroll-progress-basic-2.tsx",
      "content": "'use client';\nimport { useRef } from 'react';\nimport { ScrollProgress } from '@/components/core/scroll-progress';\n\nconst dummyContent = Array.from({ length: 10 }, (_, i) => (\n  <p key={i} className='pb-4 font-mono text-sm text-zinc-500'>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam\n    lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra\n    nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget\n    libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut\n    porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies\n    a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </p>\n));\n\nexport function ScrollProgressBasic2() {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <div className='h-[350px] overflow-auto px-8 pb-4 pt-16' ref={containerRef}>\n      <div className='border-zin-500 absolute left-0 top-0 z-10 h-10 w-full bg-white dark:bg-zinc-950'>\n        <ScrollProgress\n          className='absolute top-0 h-10 bg-zinc-200 dark:bg-zinc-800'\n          containerRef={containerRef}\n        />\n        <div className='absolute left-0 top-0 flex h-10 items-center space-x-6 px-8 font-[450]'>\n          <a\n            href='#'\n            className='text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'\n          >\n            Magazine\n          </a>\n          <a\n            href='#'\n            className='text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'\n          >\n            Blog\n          </a>\n          <a\n            href='#'\n            className='text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'\n          >\n            About\n          </a>\n        </div>\n      </div>\n      {dummyContent}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/scroll-progress.tsx",
      "content": "'use client';\n\nimport { motion, SpringOptions, useScroll, useSpring } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { RefObject } from 'react';\n\nexport type ScrollProgressProps = {\n  className?: string;\n  springOptions?: SpringOptions;\n  containerRef?: RefObject<HTMLDivElement | null>;\n};\n\nconst DEFAULT_SPRING_OPTIONS: SpringOptions = {\n  stiffness: 200,\n  damping: 50,\n  restDelta: 0.001,\n};\n\nexport function ScrollProgress({\n  className,\n  springOptions,\n  containerRef,\n}: ScrollProgressProps) {\n  const { scrollYProgress } = useScroll({\n    container: containerRef,\n  });\n\n  const scaleX = useSpring(scrollYProgress, {\n    ...DEFAULT_SPRING_OPTIONS,\n    ...(springOptions ?? {}),\n  });\n\n  return (\n    <motion.div\n      className={cn('inset-x-0 top-0 h-1 origin-left', className)}\n      style={{\n        scaleX,\n      }}\n    />\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}