{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-progress-shadcnui",
  "type": "registry:ui",
  "title": "Animated Progress Bar",
  "description": "Progress bar with smooth animation",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/data/progress/animated-progress.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { animate, motion, useMotionValue, useTransform } from \"framer-motion\";\nimport { useEffect } from \"react\";\n\nexport function AnimatedProgress() {\n  const progress = useMotionValue(0);\n  const width = useTransform(progress, [0, 100], [\"0%\", \"100%\"]);\n  const displayProgress = useTransform(progress, (v) => `${Math.round(v)}%`);\n\n  useEffect(() => {\n    const animation = animate(progress, 75, {\n      duration: 2,\n      ease: \"easeOut\",\n    });\n\n    return animation.stop;\n  }, [progress]);\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <Card className=\"w-80\">\n        <CardHeader>\n          <CardTitle className=\"text-lg\">Upload Progress</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800\">\n            <motion.div\n              style={{ width }}\n              className=\"h-full bg-gradient-to-r from-accent to-slate-500\"\n            />\n          </div>\n          <motion.p className=\"mt-2 text-right text-sm text-[var(--foreground)]/70\">\n            {displayProgress}\n          </motion.p>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/animated-progress-shadcnui.tsx"
    }
  ]
}