{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "run-widget",
  "type": "registry:component",
  "title": "Run Widget",
  "description": "An animated run widget that dynamically displays distance with smooth number transitions",
  "dependencies": [
    "@number-flow/react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/run-widget.tsx",
      "type": "registry:component",
      "content": "import { useState } from 'react';\nimport { motion, useMotionValue, useMotionValueEvent } from 'motion/react';\nimport { HiOutlineArrowUpRight } from 'react-icons/hi2';\nimport { FaRunning } from 'react-icons/fa';\nimport NumberFlow from '@number-flow/react';\n\nconst TICK_GAP = 12;\n\nexport const RunWidget = () => {\n  const x = useMotionValue(-96);\n\n  const [miles, setMiles] = useState(() => {\n    const initial = Math.abs(-96) / (TICK_GAP * 10);\n    return Math.round(initial * 10) / 10;\n  });\n\n  useMotionValueEvent(x, 'change', (latest) => {\n    if (typeof latest !== 'number') return;\n\n    const calculated = Math.abs(latest) / (TICK_GAP * 10);\n\n    if (!Number.isFinite(calculated)) return;\n\n    const rounded = Math.round(calculated * 10) / 10;\n\n    setMiles((prev) => {\n      if (prev === rounded) return prev;\n      return rounded;\n    });\n  });\n\n  return (\n    <div className=\"relative flex h-[320px] w-[320px] flex-col justify-between overflow-hidden rounded-[42px] border-2 border-[#E7E5E1] bg-[#FEFEFE] p-[7px] shadow-lg dark:border-white/5 dark:bg-[#1C1C1C]\">\n      <div className=\"flex items-start justify-between px-3 py-3\">\n        <div className=\"flex flex-col justify-center\">\n          <div className=\"relative -ml-2 flex h-[76px] w-[180px] items-center overflow-hidden\">\n            <NumberFlow\n              value={miles}\n              format={{\n                minimumFractionDigits: 1,\n                maximumFractionDigits: 1,\n              }}\n              className=\"font-sans text-[84px] leading-none font-bold text-[#282828] tabular-nums dark:text-white\"\n              style={{\n                fontVariantNumeric: 'tabular-nums',\n                lineHeight: '1',\n              }}\n            />\n          </div>\n\n          <span className=\"mt-2 text-[24px] font-medium text-[#8C8C8A] dark:text-gray-500\">\n            miles\n          </span>\n        </div>\n\n        <button className=\"shrink-0 rounded-xl bg-[#8D8C85] p-2.5 text-white hover:bg-[#8F8D8B]/80 dark:bg-[#3A3A38] dark:hover:bg-[#4A4A48]\">\n          <HiOutlineArrowUpRight size={34} strokeWidth={3} />\n        </button>\n      </div>\n\n      <div className=\"relative -mx-8 flex h-24 items-center justify-center\">\n        <div className=\"absolute left-1/2 z-10 h-12 w-[4px] -translate-x-1/2 rounded-full bg-[#595753] dark:bg-white\" />\n\n        <motion.div\n          drag=\"x\"\n          dragConstraints={{ right: 0, left: -1200 }}\n          dragElastic={0.05}\n          style={{ x, left: '50%' }}\n          transition={{ type: 'spring', stiffness: 450, damping: 35 }}\n          className=\"absolute left-1/2 flex cursor-grab items-center active:cursor-grabbing\"\n        >\n          <div className=\"flex items-center gap-[12px]\">\n            {[...Array(200)].map((_, i) => (\n              <div\n                key={i}\n                className=\"h-9 w-1 flex-shrink-0 rounded-full bg-[#DFDDDC] dark:bg-white/20\"\n              />\n            ))}\n          </div>\n        </motion.div>\n      </div>\n\n      <button className=\"mt-3 flex w-full items-center justify-center gap-2 rounded-[8px] rounded-b-[32px] bg-[#F0ECE6] py-[18px] text-[22px] font-semibold text-[#2A2620] hover:bg-[#e9e4dc] dark:bg-white/10 dark:text-white dark:hover:bg-white/20\">\n        <FaRunning size={28} />\n        Begin Run\n      </button>\n    </div>\n  );\n};\n"
    }
  ]
}