{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress",
  "title": "Scroll Progress",
  "description": "Reading progress bar scrubbed to scroll.",
  "dependencies": [
    "gsap"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/scroll-progress.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nimport { gsap, motionScale, useGSAP } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") gsap.registerPlugin(ScrollTrigger);\n\ntype ScrollProgressProps = React.ComponentProps<\"div\"> & {\n  /** Track a scrolling element's progress instead of the page, e.g. an article. CSS selector or element. */\n  target?: string | Element;\n  /** Fixed to the top of the viewport (default) or inline where you place it. */\n  position?: \"fixed\" | \"static\";\n  /** The element that scrolls, when it is not the page (e.g. a scrollable panel). */\n  scroller?: string | Element;\n};\n\n/** A reading-progress hairline scrubbed to scroll position (GSAP ScrollTrigger); smoothed unless motion is off. */\nfunction ScrollProgress({ className, target, scroller, position = \"fixed\", ...props }: ScrollProgressProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useGSAP(\n    () => {\n      const bar = ref.current;\n      if (!bar) return;\n      const smooth = motionScale(bar) ? 0.3 : true;\n      gsap.fromTo(\n        bar,\n        { scaleX: 0 },\n        {\n          scaleX: 1,\n          ease: \"none\",\n          scrollTrigger: target ? { trigger: target, scroller, start: \"top top\", end: \"bottom bottom\", scrub: smooth } : { scroller, start: 0, end: \"max\", scrub: smooth },\n        },\n      );\n    },\n    { scope: ref, dependencies: [target, scroller] },\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"scroll-progress\"\n      role=\"presentation\"\n      className={cn(\"h-0.5 w-full origin-left scale-x-0 bg-primary\", position === \"fixed\" && \"fixed inset-x-0 top-0 z-50\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { ScrollProgress };\nexport type { ScrollProgressProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/scroll-progress",
  "categories": [
    "motion"
  ],
  "type": "registry:ui"
}