{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multi-select-1-retro",
  "title": "Multi Select 1Retro",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/multi-select/retro/MultiSelect1Retro.jsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Check, X } from \"lucide-react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\nconst options = [\n  { label: \"REACT_LIB\", value: \"react\" },\n  { label: \"NEXT_JS_FW\", value: \"nextjs\" },\n  { label: \"TAILWIND_CSS\", value: \"tailwind\" },\n  { label: \"TYPESCRIPT\", value: \"typescript\" },\n  { label: \"MONGO_DB\", value: \"mongodb\" },\n  { label: \"POSTGRES_QL\", value: \"postgresql\" },\n];\n\nexport function MultiSelectRetro() {\n  const [selected, setSelected] = useState([]);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggleOption = (value) => {\n    setSelected((prev) =>\n      prev.includes(value)\n        ? prev.filter((item) => item !== value)\n        : [...prev, value]\n    );\n  };\n\n  const removeOption = (value, e) => {\n    e.stopPropagation();\n    setSelected((prev) => prev.filter((item) => item !== value));\n  };\n\n  return (    \n    <div className=\"w-full max-w-sm relative bg-white p-4 font-mono text-black\">\n      <label className=\"block text-xs font-bold uppercase mb-1 tracking-widest pl-1\">\n          SELECT_MODULES:\n      </label>\n      \n      <div\n          onClick={() => setIsOpen(!isOpen)}\n          className={`border-2 border-black bg-white p-2 min-h-[48px] flex items-center shadow-[4px_4px_0px_0px_#000000] cursor-pointer transition-all ${isOpen ? 'shadow-none translate-x-[2px] translate-y-[2px]' : ''}`}\n      >\n          <div className=\"flex flex-wrap gap-2 flex-grow\">\n              {selected.length === 0 && (\n                  <span className=\"text-gray-500 uppercase\">NO_MODULES_SELECTED</span>\n              )}\n              <AnimatePresence>\n                  {selected.map((val) => {\n                      const label = options.find(o => o.value === val)?.label;\n                      return (\n                          <motion.div\n                              key={val}\n                              initial={{ opacity: 0, scale: 0.8 }}\n                              animate={{ opacity: 1, scale: 1 }}\n                              exit={{ opacity: 0, scale: 0.8 }}\n                              className=\"bg-black text-white px-2 py-1 text-xs font-bold uppercase flex items-center gap-1\"\n                          >\n                              {label}\n                              <span onClick={(e) => removeOption(val, e)} className=\"cursor-pointer hover:text-red-400\">\n                                  <X size={12} strokeWidth={4} />\n                              </span>\n                          </motion.div>\n                      );\n                  })}\n              </AnimatePresence>\n          </div>\n          <div className=\"ml-2 border-l-2 border-black pl-2\">\n              <span className={`block transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>▼</span>\n          </div>\n      </div>\n      {isOpen && (\n          <div className=\"absolute top-full left-0 w-full mt-2 border-2 border-black bg-white shadow-[4px_4px_0px_0px_#000000] z-50 max-h-60 overflow-y-auto\">\n              {options.map((opt) => {\n                  const isSelected = selected.includes(opt.value);\n                  return (\n                      <div\n                          key={opt.value}\n                          onClick={() => toggleOption(opt.value)}\n                          className={`px-4 py-3 flex justify-between items-center cursor-pointer uppercase font-bold text-sm border-b border-black/10 last:border-none hover:bg-black hover:text-white transition-colors ${isSelected ? 'bg-black/5' : ''}`}\n                      >\n                          <span>{opt.label}</span>\n                          {isSelected && <Check size={16} strokeWidth={4} />}\n                      </div>\n                  );\n              })}\n          </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}