{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mac-searchbar-shadcnui",
  "type": "registry:component",
  "title": "Mac Searchbar",
  "description": "Mac-style searchbar with animated dropdown, glassmorphism effects, and smooth transitions",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/search/mac-searchbar.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ArrowRight, Search } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface SearchItem {\n  id: number;\n  icon: string;\n  iconBg: string;\n  title: string;\n  type: string;\n  link?: string;\n}\n\nexport function MacSearchbar() {\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n\n  const items: SearchItem[] = [\n    {\n      id: 1,\n      icon: \"💬\",\n      iconBg: \"bg-zinc-700\",\n      title: \"WhatsApp\",\n      type: \"app\",\n    },\n    {\n      id: 2,\n      icon: \"⚫\",\n      iconBg: \"bg-zinc-900\",\n      title: \"moumen-soliman/ui-tripled\",\n      link: \"https://x.com/uitripled\",\n      type: \"github\",\n    },\n    {\n      id: 3,\n      icon: \"𝕏\",\n      iconBg: \"bg-black\",\n      link: \"https://x.com/moumensoliman\",\n      title: \"Moumen Soliman on X\",\n      type: \"twitter\",\n    },\n  ];\n\n  const filteredItems = items.filter((item) =>\n    item.title.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  return (\n    <div className=\"w-full max-w-2xl\">\n      <motion.div\n        initial={{ opacity: 0, y: -20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5 }}\n        className=\"relative\"\n      >\n        {/* Search Input */}\n        <motion.div\n          className=\"relative backdrop-blur-xl bg-white/5 rounded-2xl border shadow-2xl transition-all duration-300\"\n          animate={{\n            borderColor: isFocused\n              ? \"rgba(255, 255, 255, 0.3)\"\n              : \"rgba(255, 255, 255, 0.1)\",\n            boxShadow: isFocused\n              ? \"0 0 40px rgba(255, 255, 255, 0.2), 0 20px 60px rgba(0,0,0,0.5)\"\n              : \"0 20px 60px rgba(0,0,0,0.5)\",\n          }}\n        >\n          <motion.div className=\"absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5\">\n            <Search className=\"w-5 h-5\" />\n          </motion.div>\n          <input\n            type=\"text\"\n            placeholder=\"Search or Enter URL...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            className=\"w-full bg-transparent text-foreground placeholder:text-muted-foreground rounded-2xl py-4 pl-14 pr-6 text-base border-none focus:outline-none\"\n          />\n        </motion.div>\n\n        {/* Dropdown - Animated */}\n        <AnimatePresence>\n          {(searchQuery || isFocused) && (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n              className=\"mt-2 backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 shadow-2xl overflow-hidden\"\n            >\n              {filteredItems.map((item, index) => (\n                <motion.div\n                  key={item.id}\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{\n                    opacity: {\n                      duration: 0.3,\n                      delay: index * 0.05,\n                      ease: \"easeOut\",\n                    },\n                  }}\n                  whileHover={{\n                    backgroundColor: \"rgba(255, 255, 255, 0.08)\",\n                    transition: { duration: 0.15 },\n                  }}\n                  onClick={() => {\n                    if (item.link) {\n                      window.open(item.link, \"_blank\");\n                    }\n                  }}\n                  className={`flex items-center justify-between px-5 py-3.5 ${item.link ? \"cursor-pointer\" : \"\"} group ${\n                    index !== filteredItems.length - 1\n                      ? \"border-b border-white/5\"\n                      : \"\"\n                  }`}\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <div\n                      className={`w-9 h-9 ${item.iconBg} rounded-lg flex items-center justify-center text-[var(--muted-foreground)] text-base shadow-lg`}\n                    >\n                      {item.icon}\n                    </div>\n                    <span className=\"text-foreground text-sm font-light\">\n                      {item.title}\n                    </span>\n                  </div>\n\n                  {item.link && (\n                    <button className=\"flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors text-sm font-light\">\n                      <span className=\"hidden sm:inline\">Open Link</span>\n                      <ArrowRight className=\"w-4 h-4\" />\n                    </button>\n                  )}\n                </motion.div>\n              ))}\n\n              {/* Contact the Team */}\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{\n                  opacity: {\n                    duration: 0.3,\n                    delay: filteredItems.length * 0.05,\n                    ease: \"easeOut\",\n                  },\n                }}\n                whileHover={{\n                  backgroundColor: \"rgba(255, 255, 255, 0.08)\",\n                  transition: { duration: 0.15 },\n                }}\n                className=\"flex items-center gap-3 px-5 py-3.5 cursor-pointer border-t border-white/5\"\n              >\n                <div className=\"w-9 h-9 bg-muted backdrop-blur rounded-lg flex items-center justify-center shadow-lg\">\n                  <span className=\"text-[var(--muted-foreground)] text-base\">\n                    💬\n                  </span>\n                </div>\n                <span className=\"text-foreground text-sm font-light\">\n                  Contact the Team\n                </span>\n              </motion.div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/mac-searchbar-shadcnui.tsx"
    }
  ]
}