{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fund-widget",
  "type": "registry:component",
  "title": "Fund Widget",
  "description": "An animated fund widget featuring smooth 3D transforms and progressive blur effects.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/fund-widget.tsx",
      "type": "registry:component",
      "content": "import React, { useState } from 'react';\nimport {\n  motion,\n  MotionConfig,\n  useMotionValue,\n  useTransform,\n  useMotionTemplate,\n  type Transition,\n} from 'motion/react';\nimport { FaArrowUp } from 'react-icons/fa6';\n\nexport interface FundItem {\n  id: string;\n  label: string;\n  value: string;\n  change: string;\n}\n\ninterface FundWidgetProps {\n  data?: FundItem[];\n  initialIndex?: number;\n}\n\nconst DEFAULT_DATA: FundItem[] = [\n  {\n    id: 'stocks',\n    label: 'Stocks',\n    value: '2.7Cr',\n    change: '12%',\n  },\n  {\n    id: 'funds',\n    label: 'Funds',\n    value: '3.5Cr',\n    change: '8%',\n  },\n  {\n    id: 'deposits',\n    label: 'Deposits',\n    value: '1.2Cr',\n    change: '6%',\n  },\n];\n\nconst CARD_HEIGHT = 320;\nconst DRAG_BUFFER = 40;\nconst VELOCITY_THRESHOLD = 0;\n\nconst SPRING_OPTIONS: Transition = {\n  type: 'spring',\n  stiffness: 300,\n  damping: 40,\n};\n\nconst FundCard = ({ item, i, y }: any) => {\n  const cardOffset = i * CARD_HEIGHT;\n\n  const rotateX = useTransform(\n    y,\n    [\n      -(cardOffset + CARD_HEIGHT),\n      -cardOffset,\n      -(cardOffset - CARD_HEIGHT),\n    ],\n    [-25, 0, 25],\n    { clamp: true },\n  );\n\n  const DEAD_ZONE = CARD_HEIGHT * 0.25;\n\n  const blur = useTransform(\n    y,\n    [\n      -(cardOffset + CARD_HEIGHT),\n      -(cardOffset + DEAD_ZONE),\n      -cardOffset,\n      -(cardOffset - DEAD_ZONE),\n      -(cardOffset - CARD_HEIGHT),\n    ],\n    [8, 0, 0, 0, 8],\n    { clamp: true },\n  );\n\n  const filter = useMotionTemplate`blur(${blur}px)`;\n\n  return (\n    <motion.div\n      key={item.id}\n      className=\"flex min-h-[320px] min-w-[320px] flex-col p-10 transform-3d\"\n      style={{\n        rotateX,\n        filter,\n        transformPerspective: 1000,\n      }}\n    >\n      <h2 className=\"text-[60px] leading-none font-bold text-zinc-900 dark:text-zinc-100\">\n        {item.value}\n      </h2>\n\n      <p className=\"mt-4 flex items-center gap-2 text-[32px] font-bold text-stone-400 dark:text-stone-400\">\n        {item.change}\n        <FaArrowUp className=\"text-2xl\" />\n      </p>\n\n      <h3 className=\"mt-12 text-[40px] font-bold text-stone-600 dark:text-stone-200\">\n        {item.label}\n      </h3>\n    </motion.div>\n  );\n};\n\nexport const FundWidget: React.FC<FundWidgetProps> = ({\n  data = DEFAULT_DATA,\n  initialIndex = 0,\n}) => {\n  const [index, setIndex] = useState(initialIndex);\n\n  const y = useMotionValue(-(initialIndex * CARD_HEIGHT));\n\n  const handleDragEnd = (_: any, info: any) => {\n    const offset = info.offset.y;\n    const velocity = info.velocity.y;\n\n    if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n      setIndex((prev) => Math.min(prev + 1, data.length - 1));\n    } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n      setIndex((prev) => Math.max(prev - 1, 0));\n    }\n  };\n\n  return (\n    <div>\n      <div className=\"relative flex items-center justify-center\">\n        <MotionConfig transition={SPRING_OPTIONS}>\n          <div className=\"relative overflow-visible\">\n            <div className=\"relative z-0 overflow-visible\">\n              <div className=\"absolute right-[18px] -bottom-[332px] left-[18px] z-[-1] h-20 w-[90%] rounded-[44px] border-2 border-[#E0DEDA] bg-[#F2F1EC] shadow-[0_4px_20px_rgba(0,0,0,0.03)] dark:border-white/10 dark:bg-zinc-800\" />\n            </div>\n\n            <div className=\"relative h-[320px] w-[320px] overflow-hidden rounded-[48px] border-2 border-[#E0DEDA] bg-[#FBFCF9] shadow-md select-none perspective-[1000px] transform-3d dark:border-white/10 dark:bg-zinc-900\">\n              <motion.div\n                drag=\"y\"\n                dragConstraints={{\n                  top: -((data.length - 1) * CARD_HEIGHT),\n                  bottom: 0,\n                }}\n                dragElastic={0.12}\n                style={{ y }}\n                onDragEnd={handleDragEnd}\n                animate={{\n                  y: -(index * CARD_HEIGHT),\n                }}\n                className=\"flex cursor-grab flex-col transform-3d active:cursor-grabbing\"\n              >\n                {data.map((item, i) => (\n                  <FundCard key={item.id} item={item} i={i} y={y} />\n                ))}\n              </motion.div>\n\n              <div className=\"absolute top-1/2 right-7 z-20 flex -translate-y-1/2 flex-col\">\n                {data.map((_, i) => (\n                  <button\n                    key={i}\n                    title=\"slider\"\n                    onClick={() => setIndex(i)}\n                    className=\"py-1 focus:outline-none\"\n                  >\n                    <motion.div\n                      animate={{\n                        height: i === index ? 42 : 10,\n                        backgroundColor: i === index ? '#585652' : '#D3D3D3',\n                      }}\n                      transition={{ duration: 0.3 }}\n                      className=\"w-[8px] rounded-full\"\n                    />\n                  </button>\n                ))}\n              </div>\n            </div>\n          </div>\n        </MotionConfig>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}