{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress",
  "title": "Scroll Progress",
  "description": "Measured or controlled document and container reading progress.",
  "registryDependencies": [
    "https://components.exe.xyz/r/use-reduced-motion.json",
    "https://components.exe.xyz/r/use-scroll-progress.json"
  ],
  "files": [
    {
      "path": "src/components/effects/scroll-progress.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\"\nimport { useScrollProgress } from \"@/hooks/use-scroll-progress\"\n\n/*\n * SPDX-License-Identifier: MIT\n * Inspired by Amicro's Progress Indicator by Syed Subhan Uddin.\n * Upstream: https://github.com/Subhan-code/Amicro--Micro-transitions-\n * Source: registry/ui/scroll/progress-indicator.tsx\n * Audited revision: 07adc1640084940f045875e2bb1b682c90f30c3c\n * This implementation is an original accessible React/CSS adaptation.\n */\n\nexport type ScrollProgressProps = {\n  orientation?: \"horizontal\" | \"vertical\"\n  scrollAxis?: \"x\" | \"y\"\n  target?: React.RefObject<HTMLElement | null>\n  value?: number\n  label?: string\n  className?: string\n  indicatorClassName?: string\n}\n\nexport function ScrollProgress({\n  orientation = \"horizontal\",\n  scrollAxis = \"y\",\n  target,\n  value,\n  label = \"Scroll progress\",\n  className = \"\",\n  indicatorClassName = \"\",\n}: ScrollProgressProps) {\n  const measured = useScrollProgress({ axis: scrollAxis, target })\n  const reduced = useReducedMotion()\n  const progress = Math.min(1, Math.max(0, value ?? measured))\n  const percent = Math.round(progress * 100)\n  const horizontal = orientation === \"horizontal\"\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={percent}\n      className={`${\n        horizontal ? \"h-1.5 w-full\" : \"h-full w-1.5\"\n      } overflow-hidden rounded-full bg-muted ${className}`}\n    >\n      <div\n        className={`${\n          horizontal\n            ? \"h-full w-full origin-left\"\n            : \"h-full w-full origin-bottom\"\n        } rounded-full bg-primary ${indicatorClassName}`}\n        style={{\n          transform: horizontal ? `scaleX(${progress})` : `scaleY(${progress})`,\n          transition: reduced ? \"none\" : \"transform 90ms linear\",\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "src/components/effects/scroll-progress.tsx"
    }
  ],
  "meta": {
    "collection": "motion-effects",
    "license": "MIT",
    "usage": "<ScrollProgress />",
    "source": "https://github.com/Subhan-code/Amicro--Micro-transitions-",
    "sourcePath": "registry/ui/scroll/progress-indicator.tsx",
    "sourceRevision": "07adc1640084940f045875e2bb1b682c90f30c3c"
  },
  "type": "registry:ui"
}