{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "run-widget-base",
  "type": "registry:component",
  "title": "Run Widget (base)",
  "description": "Theme-ready base variant of 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=\"border-border theme-injected bg-card relative flex h-[320px] w-[320px] flex-col justify-between overflow-hidden rounded-lg border-2 p-[7px] shadow-lg\">\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=\"text-foreground font-sans text-[84px] leading-none font-bold tabular-nums\"\n              style={{\n                fontVariantNumeric: 'tabular-nums',\n                lineHeight: '1',\n              }}\n            />\n          </div>\n\n          <span className=\"text-muted-foreground mt-2 text-[24px] font-medium\">\n            miles\n          </span>\n        </div>\n\n        <button className=\"bg-secondary text-secondary-foreground shrink-0 rounded-lg p-2.5 hover:opacity-80\">\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=\"bg-foreground absolute left-1/2 z-10 h-12 w-[4px] -translate-x-1/2 rounded-lg\" />\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=\"bg-foreground/20 h-9 w-1 flex-shrink-0 rounded-lg\"\n              />\n            ))}\n          </div>\n        </motion.div>\n      </div>\n\n      <button className=\"bg-accent text-accent-foreground mt-3 flex w-full items-center justify-center gap-2 rounded-lg py-[18px] text-[22px] font-semibold hover:opacity-90\">\n        <FaRunning size={28} />\n        Begin Run\n      </button>\n    </div>\n  );\n};\n"
    }
  ]
}