{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-stack-base",
  "type": "registry:component",
  "title": "List Stack (base)",
  "description": "Theme-ready base variant of An animated stacked list that smoothly expands and collapses to reveal or hide items..",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/list-stack.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { FaFireFlameCurved, FaSailboat } from 'react-icons/fa6';\nimport { LuTent } from 'react-icons/lu';\nimport { type IconType } from 'react-icons';\n\ninterface ListItem {\n  id: string;\n  title: string;\n  location: string;\n  date: string;\n  icon: IconType;\n}\n\ninterface ListStackProps {\n  items?: ListItem[];\n}\n\nconst ITEMS: ListItem[] = [\n  {\n    id: '1',\n    title: 'Camping',\n    location: 'Yosemite Park',\n    date: '5 August',\n    icon: LuTent,\n  },\n  {\n    id: '2',\n    title: 'Boating',\n    location: 'Lake Tahoe Park',\n    date: '2 August',\n    icon: FaSailboat,\n  },\n  {\n    id: '3',\n    title: 'Barbecue',\n    location: 'Greenfield Shores',\n    date: '28 July',\n    icon: FaFireFlameCurved,\n  },\n];\nconst CARD_HEIGHT = 60;\nconst GAP = 8;\nconst COLLAPSED_OFFSET = -7;\n\nexport const ListStack: FC<ListStackProps> = ({ items = ITEMS }) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"theme-injected h- w-full font-sans\">\n      <div className=\"flex h-[400px] w-full flex-col items-center justify-center\">\n        <div className=\"relative flex h-full w-full flex-col items-center justify-center perspective-[1000px]\">\n          {items.map((item, i) => {\n            return (\n              <motion.div\n                className=\"bg-card border-border absolute flex w-[270px] items-center rounded-lg border px-3 py-3 shadow-sm backdrop-blur-2xl\"\n                key={i}\n                animate={isExpanded ? 'expanded' : 'collapsed'}\n                style={{\n                  height: CARD_HEIGHT,\n                }}\n                variants={{\n                  expanded: {\n                    y: (items.length - 1 - i) * (CARD_HEIGHT + GAP),\n                    z: 10,\n                  },\n                  collapsed: {\n                    y: i * COLLAPSED_OFFSET,\n                    z: i * 60,\n                  },\n                }}\n                transition={{\n                  type: 'spring',\n                  stiffness: 200,\n                  damping: 23,\n                }}\n              >\n                <div className=\"flex w-full items-center font-sans\">\n                  <div\n                    key={i}\n                    className=\"text-foreground flex w-full items-center gap-x-2\"\n                  >\n                    <div className=\"bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg\">\n                      <item.icon size={24} />\n                    </div>\n                    <div className=\"leading-tighter flex-1\">\n                      <h3 className=\"text-foreground text-sm\">{item.title}</h3>\n                      <p className=\"text-muted-foreground text-xs\">\n                        {item.location}\n                      </p>\n                    </div>\n\n                    <span className=\"leading-tighter text-muted-foreground mb-[2px] ml-5 self-end text-end text-xs\">\n                      {item.date}\n                    </span>\n                  </div>\n                </div>\n              </motion.div>\n            );\n          })}\n          <motion.div\n            className=\"border-border bg-card text-foreground absolute cursor-pointer rounded-lg border px-4 py-2 shadow-sm\"\n            animate={{\n              y: isExpanded\n                ? (items.length - 1) * (CARD_HEIGHT + GAP) + CARD_HEIGHT + GAP\n                : CARD_HEIGHT + GAP,\n              z: isExpanded ? 0 : 40,\n            }}\n            transition={{\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            }}\n            layout\n            onClick={() => {\n              setIsExpanded((prev) => !prev);\n            }}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              <motion.span\n                layout\n                key={isExpanded ? 'hide' : 'show'}\n                initial={{\n                  opacity: 0,\n                }}\n                animate={{\n                  opacity: 1,\n                }}\n                exit={{\n                  opacity: 0,\n                }}\n                transition={{\n                  duration: 0.2,\n                }}\n              >\n                {' '}\n                {isExpanded ? 'Hide ' : 'Show '}\n              </motion.span>\n            </AnimatePresence>\n          </motion.div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}