{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-1-retro",
  "title": "List 1Retro",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/lists/retro/List1Retro.jsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport { Trash, Plus } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nconst demo = [\n  { id: 1, name: \"JOHN_DOE\", role: \"ADMIN\" },\n  { id: 2, name: \"JANE_SMITH\", role: \"USER\" },\n  { id: 3, name: \"JIM_BEAM\", role: \"GUEST\" },\n  { id: 4, name: \"ALICE_WONDER\", role: \"MOD\" },\n];\n\nexport function List1RetroDemo() {\n  const [filteredDemo, setFilteredDemo] = useState(demo);\n\n  const handleDelete = useCallback((id) => {\n    setFilteredDemo((prev) => prev.filter((p) => p.id !== id));\n  }, []);\n\n  const handleAdd = useCallback(() => {\n    const newId = Math.max(...filteredDemo.map((item) => item.id), 0) + 1;\n    const roles = [\"USER\", \"GUEST\", \"BOT\", \"ADMIN\"];\n    const newItem = {\n      id: newId,\n      name: `USER_${newId}`,\n      role: roles[Math.floor(Math.random() * roles.length)],\n    };\n    setFilteredDemo((prev) => [...prev, newItem]);\n  }, [filteredDemo]);\n\n  return (\n    <div className=\"w-full md:p-4 flex items-center justify-center overflow-x-hidden font-mono text-black\">\n        <div className=\"w-full flex flex-col gap-4 max-w-md border-2 border-black p-4 shadow-[8px_8px_0px_0px_#000000] bg-white\">\n            <div className=\"border-b-2 border-black pb-2 flex justify-between items-center\">\n                <span className=\"font-bold uppercase tracking-widest\">USER_DATABASE.db</span>\n                <span className=\"text-xs border border-black px-2 py-0.5 rounded-full\">{filteredDemo.length} ENTRIES</span>\n            </div>\n            \n          <button\n            onClick={handleAdd}\n            className=\"flex items-center justify-center gap-2 bg-white hover:bg-black hover:text-white transition-colors duration-200 text-black border-2 border-black p-3 font-bold uppercase tracking-wider w-full active:translate-y-1 active:shadow-inner\"\n          >\n            <Plus width={18} height={18} />\n            <span className=\"text-sm md:text-base\">INSERT_RECORD</span>\n          </button>\n          \n          <div className=\"flex flex-col gap-2\">\n            <AnimatePresence initial={false}>\n            {filteredDemo.map((item) => (\n              <motion.div\n                key={item.id}\n                initial={{\n                  opacity: 0,\n                  height: 0,\n                }}\n                animate={{\n                  opacity: 1,\n                  height: \"auto\",\n                }}\n                exit={{ opacity: 0, height: 0 }}\n                transition={{ duration: 0.2, ease: \"easeOut\" }}\n                className=\"w-full overflow-hidden\"\n              >\n                <motion.div\n                  initial={{\n                    opacity: 0,\n                    x: -20,\n                    filter: \"blur(4px)\",\n                  }}\n                  animate={{\n                    opacity: 1,\n                    x: 0,\n                    filter: \"blur(0px)\",\n                  }}\n                  exit={{\n                    opacity: 0,\n                    x: 20,\n                    filter: \"blur(4px)\",\n                  }}\n                  transition={{ duration: 0.2 }}\n                  className=\"w-full flex items-center justify-between border-2 border-black p-3 hover:bg-black hover:text-white group transition-colors duration-200\"\n                >\n                  <div className=\"flex flex-col\">\n                      <span className=\"font-bold uppercase\">{item.name}</span>\n                      <span className=\"text-xs opacity-60 group-hover:opacity-80\">ROLE: {item.role}</span>\n                  </div>\n                  \n                  <button\n                    onClick={() => handleDelete(item.id)}\n                    className=\"border-2 border-black bg-white text-black group-hover:border-white group-hover:bg-black group-hover:text-white p-2 transition-all duration-200 hover:scale-110\"\n                    aria-label=\"Delete\"\n                  >\n                    <Trash width={16} height={16} />\n                  </button>\n                </motion.div>\n              </motion.div>\n            ))}\n          </AnimatePresence>\n          </div>\n          \n          {filteredDemo.length === 0 && (\n              <div className=\"text-center py-8 opacity-50 uppercase text-sm border-2 border-dashed border-black\">\n                  DATABASE_EMPTY\n              </div>\n          )}\n        </div>\n      </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}