{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "expandable-card",
  "type": "registry:ui",
  "title": "Spring Expandable Modal Card",
  "description": "Card that smoothly expands into an overlay detail view via shared layout springs.",
  "category": "cards",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "card",
    "expandable",
    "modal",
    "layoutId"
  ],
  "files": [
    {
      "path": "registry/cards/expandable-card/expandable-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/expandable-card.tsx",
      "content": "import React, { useState } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { CaretDown, CheckCircle, ShieldCheck } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\nexport interface ExpandableCardProps {\n  title?: string\n  summary?: string\n  details?: string\n  className?: string\n}\n\nexport const ExpandableCard: React.FC<ExpandableCardProps> = ({\n  title = 'Raft Consensus Protocol Verification',\n  summary = 'Asserts safety, leader completeness, and partition resilience.',\n  details = 'The SMT solver simulates a 5-node cluster partition across 10,000 asynchronous election rounds. Every log sequence is guaranteed linearizable and deterministic.',\n  className,\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  return (\n    <motion.div\n      layout\n      transition={{ layout: { duration: 0.3, type: 'spring', damping: 25, stiffness: 200 } }}\n      className={cn(\n        'w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-zinc-950 p-5 text-white transition-colors hover:border-white/20',\n        className\n      )}\n    >\n      <div\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"flex cursor-pointer items-start justify-between gap-4 select-none\"\n      >\n        <div className=\"flex items-start gap-3\">\n          <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/5 border border-white/10 text-emerald-400\">\n            <ShieldCheck size={18} weight=\"bold\" />\n          </div>\n          <div>\n            <h4 className=\"text-sm font-bold text-zinc-900 dark:text-white\">{title}</h4>\n            <p className=\"mt-1 text-xs text-zinc-600 dark:text-zinc-400\">{summary}</p>\n          </div>\n        </div>\n\n        <motion.div\n          animate={{ rotate: isExpanded ? 180 : 0 }}\n          transition={{ duration: 0.2 }}\n          className=\"text-zinc-600 dark:text-zinc-400 p-1\"\n        >\n          <CaretDown size={16} />\n        </motion.div>\n      </div>\n\n      <AnimatePresence>\n        {isExpanded && (\n          <motion.div\n            initial={{ opacity: 0, height: 0 }}\n            animate={{ opacity: 1, height: 'auto' }}\n            exit={{ opacity: 0, height: 0 }}\n            transition={{ duration: 0.25 }}\n            className=\"overflow-hidden pt-4 border-t border-white/10 mt-4 text-xs text-zinc-300 leading-relaxed font-mono\"\n          >\n            <p>{details}</p>\n            <div className=\"mt-3 flex items-center gap-2 text-[10px] text-emerald-400\">\n              <CheckCircle size={12} weight=\"fill\" />\n              <span>Z3 Formal Witness: PROOF_ACCEPTED</span>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </motion.div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}