{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-7",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/widget-7.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, useEffect } from 'react';\nimport { Eye, ChevronDown, ArrowDownToLine, ArrowRightLeft, ArrowUpFromLine, Check } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\ntype Currency = {\n  code: string;\n  symbol: string;\n  balance: string;\n  growth: string;\n};\n\nconst currencies: Currency[] = [\n  { code: 'USD', symbol: '$', balance: '8,459.50', growth: '+$342.10' },\n  { code: 'INR', symbol: '₹', balance: '706,450.00', growth: '+₹28,500.00' },\n  { code: 'USDC', symbol: 'USDC', balance: '8,459.50', growth: '+USDC 342.10' },\n  { code: 'EUR', symbol: '€', balance: '7,890.25', growth: '+€310.50' },\n];\n\nexport function AccountBalanceWidget() {\n  const [selectedCurrency, setSelectedCurrency] = useState<Currency>(currencies[0]);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const chartPath = \"M 0 120 C 50 110, 80 120, 130 85 C 170 55, 210 70, 260 35 C 290 15, 320 20, 320 20\";\n  const fillPath = `${chartPath} L 320 160 L 0 160 Z`;\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsDropdownOpen(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-4 w-full max-w-[420px]\">\n      {/* Main Card */}\n      <div className=\"bg-card border-border w-full rounded-[2rem] border p-6 shadow-sm relative overflow-hidden flex flex-col min-h-[320px]\">\n        {/* Header */}\n        <div className=\"mb-4 flex items-center justify-between relative z-10\">\n          <div className=\"flex items-center gap-2 text-muted-foreground\">\n            <span className=\"text-sm font-medium\">Available Funds</span>\n            <Eye className=\"h-4 w-4\" />\n          </div>\n          \n          <div className=\"relative\" ref={dropdownRef}>\n            <button \n              onClick={() => setIsDropdownOpen(!isDropdownOpen)}\n              className=\"flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-xs font-medium text-card-foreground hover:bg-muted/50 transition-colors\"\n            >\n              {selectedCurrency.code} \n              <motion.div animate={{ rotate: isDropdownOpen ? 180 : 0 }} transition={{ duration: 0.2 }}>\n                <ChevronDown className=\"h-3 w-3 opacity-70\" />\n              </motion.div>\n            </button>\n            \n            <AnimatePresence>\n              {isDropdownOpen && (\n                <motion.div\n                  initial={{ opacity: 0, y: -10, scale: 0.95 }}\n                  animate={{ opacity: 1, y: 0, scale: 1 }}\n                  exit={{ opacity: 0, y: -10, scale: 0.95 }}\n                  transition={{ duration: 0.15, ease: \"easeOut\" }}\n                  className=\"absolute right-0 top-full mt-2 w-32 rounded-xl border border-border bg-popover p-1 shadow-md z-50\"\n                >\n                  {currencies.map((currency) => (\n                    <button\n                      key={currency.code}\n                      onClick={() => {\n                        setSelectedCurrency(currency);\n                        setIsDropdownOpen(false);\n                      }}\n                      className=\"flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-medium text-popover-foreground hover:bg-muted transition-colors\"\n                    >\n                      <span>{currency.code}</span>\n                      {selectedCurrency.code === currency.code && (\n                        <Check className=\"h-3 w-3 text-primary\" />\n                      )}\n                    </button>\n                  ))}\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n        </div>\n\n        {/* Balance */}\n        <div className=\"mb-2 flex items-baseline gap-1 relative z-10\">\n          <span className={`font-semibold text-muted-foreground ${selectedCurrency.code === 'USDC' ? 'text-xl mr-1' : 'text-3xl'}`}>\n            {selectedCurrency.symbol}\n          </span>\n          <motion.span \n            key={selectedCurrency.code}\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            className=\"text-card-foreground text-5xl font-bold tracking-tighter\"\n          >\n            {selectedCurrency.balance}\n          </motion.span>\n        </div>\n\n        {/* Growth */}\n        <div className=\"mb-8 flex items-center gap-3 relative z-10\">\n          <motion.span \n            key={selectedCurrency.growth}\n            initial={{ opacity: 0, x: -10 }}\n            animate={{ opacity: 1, x: 0 }}\n            className=\"text-primary font-medium text-sm\"\n          >\n            {selectedCurrency.growth}\n          </motion.span>\n          <div className=\"bg-primary/10 text-primary flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-semibold\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>\n            4.2%\n          </div>\n        </div>\n\n        <div className=\"flex-1\" />\n\n        {/* Chart */}\n        <div className=\"absolute left-0 right-0 bottom-0 h-[180px] pointer-events-none opacity-80\">\n          <svg viewBox=\"0 0 320 160\" className=\"w-full h-full text-primary\" preserveAspectRatio=\"none\">\n            <defs>\n              <linearGradient id=\"fillGradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n                <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n              </linearGradient>\n            </defs>\n            <motion.path\n              key={`fill-${selectedCurrency.code}`}\n              d={fillPath}\n              fill=\"url(#fillGradient)\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 1, delay: 0.1 }}\n            />\n            <motion.path\n              key={`chart-${selectedCurrency.code}`}\n              d={chartPath}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              initial={{ pathLength: 0 }}\n              animate={{ pathLength: 1 }}\n              transition={{ duration: 1, ease: \"easeInOut\" }}\n            />\n          </svg>\n        </div>\n\n        {/* Time Filters */}\n        <div className=\"relative z-10 flex justify-center gap-2 pt-8\">\n          {['1D', '1W', '1M', '1Y'].map((period) => (\n            <button\n              key={period}\n              className={`px-4 py-1.5 rounded-full text-xs font-bold transition-colors ${\n                period === '1W'\n                  ? 'bg-muted text-foreground'\n                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'\n              }`}\n            >\n              {period}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Action Buttons */}\n      <div className=\"grid grid-cols-3 gap-3\">\n        {[\n          { label: 'Deposit', icon: ArrowDownToLine },\n          { label: 'Transfer', icon: ArrowRightLeft },\n          { label: 'Withdraw', icon: ArrowUpFromLine },\n        ].map((action, i) => (\n          <button\n            key={i}\n            className=\"bg-card border-border flex flex-col items-center justify-center gap-3 rounded-2xl border py-4 shadow-sm transition-colors hover:bg-muted/50\"\n          >\n            <div className=\"bg-foreground text-background rounded-full p-3\">\n              <action.icon className=\"h-5 w-5\" />\n            </div>\n            <span className=\"text-card-foreground text-sm font-semibold\">{action.label}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/widget-7.tsx"
    }
  ],
  "type": "registry:ui"
}