{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elastic-slider-motion",
  "type": "registry:component",
  "description": "A slider component with elastic animation.",
  "dependencies": [
    "motion/react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/slider/elastic-slider/ElasticSliderMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useRef, useState } from \"react\";\r\nimport {\r\n  animate,\r\n  motion,\r\n  useMotionValue,\r\n  useMotionValueEvent,\r\n  useTransform,\r\n} from \"motion/react\";\r\nimport { Minus, Plus } from \"lucide-react\";\r\n\r\nconst MAX_OVERFLOW = 50;\r\n\r\ninterface ElasticSliderProps {\r\n  defaultValue?: number;\r\n  min?: number;\r\n  max?: number;\r\n  step?: number;\r\n}\r\n\r\nconst ElasticSliderMotion: React.FC<ElasticSliderProps> = ({\r\n  defaultValue = 50,\r\n  min = 0,\r\n  max = 100,\r\n  step = 1,\r\n}) => {\r\n  const [value, setValue] = useState(defaultValue);\r\n  const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n  const clientX = useMotionValue(0);\r\n  const overflow = useMotionValue(0);\r\n\r\n  useMotionValueEvent(clientX, \"change\", (latest) => {\r\n    if (!sliderRef.current) return;\r\n    const { left, right } = sliderRef.current.getBoundingClientRect();\r\n    let diff = 0;\r\n    if (latest < left) diff = left - latest;\r\n    else if (latest > right) diff = latest - right;\r\n    overflow.jump(decay(diff, MAX_OVERFLOW));\r\n  });\r\n\r\n  const updateValue = (clientXPos: number) => {\r\n    if (!sliderRef.current) return;\r\n    const { left, width } = sliderRef.current.getBoundingClientRect();\r\n    let newValue = min + ((clientXPos - left) / width) * (max - min);\r\n    newValue = Math.round(newValue / step) * step;\r\n    setValue(Math.min(Math.max(newValue, min), max));\r\n    clientX.jump(clientXPos);\r\n  };\r\n\r\n  return (\r\n    <motion.div\r\n      whileHover={{ scale: 1.05 }}\r\n      transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\r\n      className=\"flex flex-col items-center w-72 group\"\r\n    >\r\n      <div className=\"flex items-center gap-2 w-full\">\r\n      \r\n        <Minus className=\"w-5 h-5 text-gray-500\" />\r\n\r\n        <div\r\n          ref={sliderRef}\r\n          className=\"relative flex-1 py-0 cursor-grab\"\r\n          onPointerDown={(e) => {\r\n            updateValue(e.clientX);\r\n            e.currentTarget.setPointerCapture(e.pointerId);\r\n          }}\r\n          onPointerMove={(e) => e.buttons > 0 && updateValue(e.clientX)}\r\n          onPointerUp={() =>\r\n            animate(overflow, 0, { type: \"spring\", bounce: 0.5 })\r\n          }\r\n        >\r\n          <motion.div\r\n            style={{\r\n              scaleX: useTransform(\r\n                () =>\r\n                  1 + overflow.get() / (sliderRef.current?.offsetWidth || 1)\r\n              ),\r\n              scaleY: useTransform(overflow, [0, MAX_OVERFLOW], [1, 0.8]),\r\n              transformOrigin: useTransform(() =>\r\n                sliderRef.current\r\n                  ? clientX.get() <\r\n                    sliderRef.current.offsetLeft +\r\n                      sliderRef.current.offsetWidth / 2\r\n                    ? \"right\"\r\n                    : \"left\"\r\n                  : \"center\"\r\n              ),\r\n            }}\r\n            className=\"h-2.5 group-hover:h-3 transition-all duration-500 rounded-full bg-gray-300 dark:bg-white/30\"\r\n          >\r\n            <div\r\n              className=\"h-full bg-primary rounded-full\"\r\n              style={{ width: `${((value - min) / (max - min)) * 100}%` }}\r\n            />\r\n          </motion.div>\r\n        </div>\r\n\r\n        <Plus className=\"w-5 h-5 text-gray-500\" />\r\n      </div>\r\n\r\n      <p className=\"mt-0 text-sm font-medium text-gray-500\">{value}</p>\r\n    </motion.div>\r\n  );\r\n};\r\n\r\nfunction decay(value: number, max: number): number {\r\n  const entry = value / max;\r\n  return 2 * (1 / (1 + Math.exp(-entry)) - 0.5) * max;\r\n}\r\n\r\nexport default ElasticSliderMotion;\r\n",
      "type": "registry:component",
      "target": "components/animated/slider/elastic-slider/ElasticSliderMotion.tsx"
    }
  ]
}