{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expand-details",
  "type": "registry:component",
  "title": "Expand Details",
  "description": "Interactive micro-interaction component for expanding details.",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react-use-measure"
  ],
  "files": [
    {
      "path": "components/watermelon/expand-details.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ChevronDown } from 'lucide-react';\nimport useMeasure from 'react-use-measure';\n\nconst SPRING_CONFIG = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 22,\n  mass: 1.2,\n} as const;\n\nexport default function ExpandDetails() {\n  const [isOpen, setIsOpen] = useState(true);\n  const [ref, bounds] = useMeasure({ offsetSize: true });\n\n  return (\n    <div className=\"flex h-screen w-full items-center justify-center btransition-colors \">\n      <motion.div\n        initial={{ borderRadius: 20 }}\n        animate={{\n          width: isOpen ? 320 : 120,\n          height: bounds.height > 0 ? bounds.height : 'auto',\n          borderRadius: isOpen ? 20 : 24,\n        }}\n        transition={{\n          height: {\n            ...SPRING_CONFIG,\n            delay: isOpen ? 0.25 : 0,\n          },\n          width: {\n            ...SPRING_CONFIG,\n            delay: isOpen ? 0 : 0.3,\n          },\n          borderRadius: SPRING_CONFIG,\n        }}\n        className=\"overflow-hidden bg-zinc-100 dark:bg-zinc-900\"\n      >\n        <div ref={ref} className=\"relative px-4 py-2\">\n          <motion.button\n            layout=\"position\"\n            onClick={() => setIsOpen((prev) => !prev)}\n            className=\"flex w-full items-center gap-1 text-zinc-500 transition-colors hover:text-zinc-900 focus:outline-none dark:text-zinc-400 dark:hover:text-zinc-100\"\n          >\n            <motion.div\n              animate={{ rotate: isOpen ? 0 : -90 }}\n              transition={{ duration: 0.2, ease: 'easeOut', delay: 0.3 }}\n              className=\"flex items-center justify-center\"\n            >\n              <ChevronDown className=\"size-5 stroke-2\" />\n            </motion.div>\n\n            <span className=\"text-lg font-medium tracking-tight text-zinc-900 dark:text-zinc-100\">\n              Details\n            </span>\n          </motion.button>\n\n          <AnimatePresence initial={false} mode=\"popLayout\">\n            {isOpen && (\n              <motion.div\n                initial={{\n                  opacity: 0,\n                  filter: 'blur(8px)',\n                  y: 40,\n                }}\n                animate={{\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                  y: 0,\n                  transition: {\n                    type: 'spring',\n                    duration: 0.4,\n                    bounce: 0,\n                    delay: 0.3,\n                  },\n                }}\n                exit={{\n                  opacity: 0,\n                  filter: 'blur(8px)',\n                  y: 16,\n                }}\n                transition={{\n                  type: 'spring',\n                  duration: 0.4,\n                  bounce: 0,\n                }}\n                className=\"min-w-[320px] overflow-hidden\"\n              >\n                <div className=\"mt-3 ml-6 grid grid-cols-2 gap-x-4 gap-y-5\">\n                  <div className=\"col-span-2\">\n                    <div className=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">\n                      Model\n                    </div>\n                    <div className=\"mt-1 text-lg tracking-tight text-zinc-900 dark:text-zinc-100\">\n                      GPT 5.5 Codex\n                    </div>\n                  </div>\n\n                  <div>\n                    <div className=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">\n                      Tokens\n                    </div>\n                    <div className=\"mt-1 text-lg tracking-tight text-zinc-900 dark:text-zinc-100\">\n                      3.4K\n                    </div>\n                  </div>\n\n                  <div>\n                    <div className=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">\n                      Cost\n                    </div>\n                    <div className=\"mt-1 text-lg tracking-tight text-zinc-900 dark:text-zinc-100\">\n                      $0.27\n                    </div>\n                  </div>\n\n                  <div>\n                    <div className=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">\n                      Latency\n                    </div>\n                    <div className=\"mt-1 text-lg tracking-tight text-zinc-900 dark:text-zinc-100\">\n                      1.4s\n                    </div>\n                  </div>\n\n                  <div>\n                    <div className=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">\n                      Temperature\n                    </div>\n                    <div className=\"mt-1 text-lg tracking-tight text-zinc-900 dark:text-zinc-100\">\n                      0.7\n                    </div>\n                  </div>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"
    }
  ]
}