{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "labeled-progress-indicator",
  "type": "registry:component",
  "title": "Labeled Progress Indicator",
  "description": "An animated progress indicator with dynamic labels that update smoothly.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/labeled-progress-indicator.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { useState, useEffect, type FC } from 'react';\n\nexport interface LabeledProgressIndicatorProps {\n  labels: string[];\n  progress?: string;\n  intervalMs?: number;\n  showThemeToggle?: boolean;\n}\n\nexport const LabeledProgressIndicator: FC<LabeledProgressIndicatorProps> = ({\n  labels,\n  progress = '55%',\n  intervalMs = 2000,\n}) => {\n  const [labelIndex, setLabelIndex] = useState(0);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setLabelIndex((prev) => (prev + 1) % labels.length);\n    }, intervalMs);\n\n    return () => clearInterval(interval);\n  }, [labels.length, intervalMs]);\n\n  return (\n    <div className=\"flex flex-col items-center gap-5\">\n      <div className=\"relative flex w-full items-center justify-center perspective-[800px] transform-3d\">\n        <AnimatePresence mode=\"popLayout\">\n          <motion.span\n            key={labelIndex}\n            initial={{\n              opacity: 0,\n              y: 10,\n              scale: 2,\n              filter: 'blur(4px)',\n              rotateX: -60,\n            }}\n            animate={{\n              opacity: 1,\n              y: 0,\n              scale: 1,\n              filter: 'blur(0px)',\n              rotateX: 0,\n            }}\n            exit={{\n              opacity: 0,\n              filter: 'blur(4px)',\n              rotateX: 90,\n              scale: 0.9,\n            }}\n            transition={{\n              type: 'spring',\n              stiffness: 600,\n              damping: 100,\n              mass: 10,\n            }}\n            className=\"origon-bottom flex w-full items-center justify-center text-3xl font-bold text-[#B5B5B5] will-change-transform transform-3d dark:text-zinc-400\"\n          >\n            {labels[labelIndex]}\n          </motion.span>\n        </AnimatePresence>\n      </div>\n\n      <div className=\"h-4 w-[320px] overflow-hidden rounded-full border border-black/5 bg-[#F0F0F0] shadow-inner dark:border-white/5 dark:bg-zinc-900\">\n        <motion.div\n          initial={{ width: '0%' }}\n          animate={{ width: progress }}\n          transition={{ duration: 1, ease: 'easeOut' }}\n          className=\"relative h-full overflow-hidden rounded-full bg-[#016FFE] dark:bg-blue-600\"\n        >\n          <motion.div\n            initial={{ x: '-100%' }}\n            animate={{ x: '200%' }}\n            transition={{\n              duration: intervalMs / 1000,\n              repeat: Infinity,\n              ease: 'linear',\n            }}\n            className=\"absolute inset-y-0 w-full bg-linear-to-r from-zinc-900/10 via-sky-300 to-zinc-900/10\"\n          />\n        </motion.div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}