{
  "name": "scroll-progress",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion-v",
    "@vueuse/core"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "ScrollProgress.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '~/lib/utils'\nimport { Motion, useScroll, useSpring } from 'motion-v'\nimport type { SpringOptions } from 'motion-v'\nimport type { MaybeComputedElementRef } from '@vueuse/core'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: string\n    springOptions?: SpringOptions\n    containerRef?: MaybeComputedElementRef\n  }>(),\n  {},\n)\n\nconst DEFAULT_SPRING_OPTIONS: SpringOptions = {\n  stiffness: 200,\n  damping: 50,\n  restDelta: 0.001,\n}\n\nconst { scrollYProgress } = useScroll({\n  container: props.containerRef,\n})\nconst scaleX = useSpring(scrollYProgress, {\n  ...DEFAULT_SPRING_OPTIONS,\n  ...(props.springOptions ?? {}),\n})\n</script>\n\n<template>\n  <Motion\n    :class=\"cn('inset-x-0 top-0 h-1 origin-left', props.class)\"\n    :style=\"{ scaleX }\"\n  />\n</template>\n",
      "type": "registry:ui"
    }
  ]
}