{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-tracker",
  "title": "Scroll Tracker",
  "description": "Track scroll progress with a visual indicator.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "packages/scroll-tracker/scroll-tracker.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, useScroll } from \"motion/react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface ScrollTrackerProps extends React.ComponentProps<typeof motion.div> {\r\n  /**\r\n   * Thickness of the progress indicator\r\n   * @default 4\r\n   */\r\n  thickness?: number;\r\n  /**\r\n   * Tailwind color class for the tracker\r\n   * @default \"bg-primary\"\r\n   */\r\n  trackerColor?: string;\r\n  /**\r\n   * Where to position the tracker\r\n   * @default \"top\"\r\n   */\r\n  position?: \"top\" | \"bottom\";\r\n  /**\r\n   * Reference to scrollable element\r\n   * If not specified, uses window\r\n   */\r\n  targetContainer?: React.RefObject<HTMLElement | null>;\r\n}\r\n\r\nfunction ScrollTracker({\r\n  thickness = 4,\r\n  trackerColor = \"bg-primary\",\r\n  position = \"top\",\r\n  className,\r\n  targetContainer,\r\n  ...rest\r\n}: ScrollTrackerProps) {\r\n  const { scrollYProgress } = useScroll({\r\n    container: targetContainer as any,\r\n  });\r\n\r\n  const positionalClasses = cn(\r\n    \"absolute left-0 right-0 z-50 origin-left\",\r\n    !targetContainer && \"fixed\",\r\n    position === \"top\" ? \"top-0\" : \"bottom-0\",\r\n    trackerColor,\r\n    className,\r\n  );\r\n\r\n  const inlineStyles = {\r\n    scaleX: scrollYProgress,\r\n    height: `${thickness}px`,\r\n  };\r\n\r\n  return (\r\n    <motion.div\r\n      data-ui=\"scroll-tracker\"\r\n      className={positionalClasses}\r\n      style={inlineStyles}\r\n      {...rest}\r\n    />\r\n  );\r\n}\r\n\r\nexport { ScrollTracker };\r\n",
      "type": "registry:component",
      "target": "components/satori-ui/scroll-tracker.tsx"
    }
  ],
  "type": "registry:component"
}