{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-8",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-8.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { ArrowUpRight, Plus, ArrowRight } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nconst accounts = [\n  { id: 0, name: 'Main Vault', number: '•••• 8092', balance: '5 240', cents: '.00' },\n  { id: 1, name: 'Checking', number: '•••• 3762', balance: '1 480', cents: '.24' },\n  { id: 2, name: 'Savings', number: '•••• 9104', balance: '12 850', cents: '.50' },\n  { id: 3, name: 'Business', number: '•••• 5521', balance: '8 420', cents: '.90' },\n];\n\nexport function PortfolioPerformanceWidget() {\n  const [activeDot, setActiveDot] = useState(0);\n  const activeAccount = accounts[activeDot];\n\n  return (\n    <div className=\"bg-muted border-border/30 w-full max-w-[380px] rounded-[3rem] border p-2.5 shadow-sm\">\n      {/* Top White Card */}\n      <motion.div\n        initial={{ y: 10, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ duration: 0.5, ease: 'easeOut' }}\n        className=\"bg-card border-border/50 rounded-[2.5rem] border p-8 pb-10 shadow-sm overflow-hidden\"\n      >\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeAccount.id}\n            initial={{ opacity: 0, x: 20 }}\n            animate={{ opacity: 1, x: 0 }}\n            exit={{ opacity: 0, x: -20 }}\n            transition={{ duration: 0.15, ease: \"easeInOut\" }}\n          >\n            <div className=\"mb-10 flex items-center justify-between\">\n              <span className=\"text-muted-foreground/80 text-[1.1rem] font-medium\">\n                {activeAccount.name}\n              </span>\n              <span className=\"text-muted-foreground/60 text-[1.1rem] font-medium tracking-widest\">\n                {activeAccount.number}\n              </span>\n            </div>\n\n            <div className=\"flex items-end justify-between\">\n              <div className=\"text-card-foreground text-5xl font-bold tracking-tight\">\n                ${activeAccount.balance}\n                <span className=\"text-muted-foreground/80 text-4xl font-semibold\">\n                  {activeAccount.cents}\n                </span>\n              </div>\n              <button className=\"text-muted-foreground/40 hover:text-foreground mb-1 p-1 transition-colors\">\n                <ArrowUpRight className=\"h-8 w-8\" strokeWidth={2.5} />\n              </button>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      </motion.div>\n\n      {/* Pagination Dots */}\n      <div className=\"flex items-center justify-center gap-2 py-6\">\n        {accounts.map((acc, idx) => (\n          <button\n            key={acc.id}\n            onClick={() => setActiveDot(idx)}\n            className=\"relative flex h-4 cursor-pointer items-center justify-center\"\n            aria-label={`Go to slide ${idx + 1}`}\n          >\n            <motion.div\n              layout\n              className={`rounded-full ${\n                activeDot === idx\n                  ? 'bg-foreground/40 h-1.5 w-5'\n                  : 'bg-foreground/20 h-1.5 w-1.5'\n              }`}\n              transition={{ type: 'spring', stiffness: 300, damping: 30 }}\n            />\n          </button>\n        ))}\n      </div>\n\n      {/* Action Buttons */}\n      <div className=\"grid grid-cols-3 gap-2 px-4 pt-1 pb-6\">\n        {[\n          { label: 'Send', icon: ArrowUpRight },\n          { label: 'Deposit', icon: Plus },\n          { label: 'Transfer', icon: ArrowRight },\n        ].map((action, i) => (\n          <motion.button\n            key={i}\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            whileTap={{ scale: 0.92 }}\n            transition={{\n              opacity: { duration: 0.4, delay: 0.15 + i * 0.1 },\n              y: { duration: 0.4, delay: 0.15 + i * 0.1 },\n              scale: { duration: 0.1 },\n            }}\n            className=\"group flex flex-col items-center gap-3 cursor-pointer\"\n          >\n            <div className=\"bg-card border-border/50 text-foreground group-hover:bg-foreground group-hover:text-background flex h-16 w-16 items-center justify-center rounded-full border shadow-sm transition-all duration-300\">\n              <action.icon className=\"h-7 w-7\" strokeWidth={2.5} />\n            </div>\n            <span className=\"text-foreground/80 group-hover:text-foreground text-[15px] font-medium transition-colors\">\n              {action.label}\n            </span>\n          </motion.button>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/widget-8.tsx"
    }
  ],
  "type": "registry:ui"
}