{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress",
  "title": "Scroll Progress",
  "description": "A reading progress bar that fills as the page scrolls, with CSS scroll-driven animations and no JavaScript.",
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/scroll-progress.tsx",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface ScrollProgressProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /** Which edge of the viewport the bar sits on. */\n  position?: \"top\" | \"bottom\";\n  /**\n   * What it measures: \"root\" is the page, \"nearest\" the closest scrolling\n   * ancestor (give the bar `sticky` or `absolute` positioning inside it).\n   */\n  timeline?: \"root\" | \"nearest\";\n}\n\n/**\n * A reading progress bar that fills as the page scrolls. It is a CSS\n * scroll-driven animation of `scaleX`, so there is no JavaScript and no\n * scroll listener, and it works in server components. Browsers without\n * scroll timelines show nothing rather than a bar stuck at zero. It is\n * decorative and hidden from screen readers. It keeps running with\n * `prefers-reduced-motion`, since it follows the scroll position rather\n * than adding motion of its own.\n *\n * @example\n * <ScrollProgress className=\"bg-foreground h-1\" />\n */\nfunction ScrollProgress({\n  position = \"top\",\n  timeline = \"root\",\n  className,\n  style,\n  ...props\n}: ScrollProgressProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"scroll-progress\"\n      data-position={position}\n      className={cn(\n        \"bg-primary pointer-events-none fixed inset-x-0 z-50 h-[3px] origin-left\",\n        position === \"bottom\" ? \"bottom-0\" : \"top-0\",\n        \"supports-[animation-timeline:scroll()]:animate-scroll-progress hidden supports-[animation-timeline:scroll()]:block\",\n        className\n      )}\n      style={\n        {\n          // After the utility's shorthand, which would reset the timeline.\n          animationTimeline: timeline === \"nearest\" ? \"scroll(nearest)\" : \"scroll(root)\",\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    />\n  );\n}\n\nexport { ScrollProgress, type ScrollProgressProps };\n",
      "type": "registry:ui"
    }
  ],
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "keyframes": {
            "scroll-progress": {
              "from": {
                "transform": "scaleX(0)"
              },
              "to": {
                "transform": "scaleX(1)"
              }
            }
          },
          "animation": {
            "scroll-progress": "scroll-progress linear both"
          }
        }
      }
    }
  },
  "cssVars": {
    "theme": {
      "animate-scroll-progress": "scroll-progress linear both"
    }
  },
  "css": {
    "@keyframes scroll-progress": {
      "from": {
        "transform": "scaleX(0)"
      },
      "to": {
        "transform": "scaleX(1)"
      }
    }
  },
  "categories": [
    "motion"
  ],
  "type": "registry:ui"
}