{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "discover-button",
  "title": "Discover Button",
  "description": "An interactive button with expanding discovery state.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/discover-button.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { motion } from \"motion/react\";\r\n\r\nimport {\r\n  Search01Icon,\r\n  FavouriteIcon,\r\n  Fire02Icon,\r\n  MultiplicationSignIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\n\r\n// Change Here\r\nconst TABS = [\r\n  {\r\n    id: \"popular\",\r\n    label: \"Popular\",\r\n    icon: Fire02Icon,\r\n    color: \"text-red-500\",\r\n    fill: \"fill-red-500\",\r\n    bg: \"bg-red-50\",\r\n  },\r\n  {\r\n    id: \"favorites\",\r\n    label: \"Favorites\",\r\n    icon: FavouriteIcon,\r\n    color: \"text-gray-900\",\r\n    fill: \"fill-gray-900\",\r\n    bg: \"bg-gray-100\",\r\n  },\r\n] as const;\r\n\r\nexport default function DiscoverButton() {\r\n  const [activeTab, setActiveTab] = useState<(typeof TABS)[number][\"id\"]>(\r\n    TABS[0].id\r\n  );\r\n  const [isSearchExpanded, setIsSearchExpanded] = useState(false);\r\n\r\n  return (\r\n    <div className=\"flex items-center gap-3 p-2 h-full \">\r\n      {/* Search Button / Input */}\r\n      <motion.div\r\n        layout\r\n        transition={{\r\n          type: \"spring\",\r\n          damping: 20,\r\n          stiffness: 230,\r\n          mass: 1.2,\r\n        }}\r\n        onClick={() => !isSearchExpanded && setIsSearchExpanded(true)}\r\n        className={`flex items-center bg-white rounded-[3rem] shadow-lg cursor-pointer h-[60px] overflow-hidden relative px-[1.125rem]     ${\r\n          isSearchExpanded ? \"flex-1\" : \"\"\r\n        }`}\r\n      >\r\n        <div className=\"shrink-0\">\r\n          <HugeiconsIcon\r\n            icon={Search01Icon}\r\n            className=\"w-6 h-6 text-gray-800\"\r\n          />\r\n        </div>\r\n\r\n        <motion.div\r\n          initial={false}\r\n          animate={{\r\n            width: isSearchExpanded ? \"auto\" : \"0px\",\r\n            opacity: isSearchExpanded ? 1 : 0,\r\n            filter: isSearchExpanded ? \"blur(0px)\" : \"blur(4px)\",\r\n            marginLeft: isSearchExpanded ? \"12px\" : \"0px\",\r\n          }}\r\n          transition={{\r\n            type: \"spring\",\r\n            damping: 20,\r\n            stiffness: 230,\r\n            mass: 1.2,\r\n          }}\r\n          className=\"overflow-hidden -mb-0.5 flex items-center\"\r\n        >\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            className=\"border-0 outline-none bg-transparent text-lg focus-visible:ring-0 focus-visible:ring-offset-0 w-full\"\r\n            onClick={(e) => e.stopPropagation()}\r\n          />\r\n        </motion.div>\r\n      </motion.div>\r\n\r\n      {/* Tab Container / Close Button */}\r\n      <motion.div\r\n        layout\r\n        transition={{\r\n          type: \"spring\",\r\n          damping: 20,\r\n          stiffness: 230,\r\n          mass: 1.2,\r\n        }}\r\n        className={`flex items-center bg-white rounded-[3rem] shadow-lg h-[60px] overflow-hidden relative `}\r\n      >\r\n        {/* Wrapper to control clipping - clips from right side */}\r\n        <motion.div\r\n          initial={false}\r\n          animate={{\r\n            width: isSearchExpanded ? \"60px\" : \"auto\",\r\n          }}\r\n          transition={{\r\n            type: \"spring\",\r\n            damping: 20,\r\n            stiffness: 230,\r\n            mass: 1.2,\r\n          }}\r\n          className=\"overflow-hidden relative h-full flex items-center\"\r\n        >\r\n          {/* Tabs Group - stays in place, gets clipped */}\r\n          <motion.div\r\n            initial={false}\r\n            animate={{\r\n              opacity: isSearchExpanded ? 0 : 1,\r\n              filter: isSearchExpanded ? \"blur(4px)\" : \"blur(0px)\",\r\n              width: \"auto\",\r\n            }}\r\n            transition={{\r\n              duration: 0.2,\r\n            }}\r\n            className={`flex items-center  whitespace-nowrap `}\r\n          >\r\n            <div className=\"flex items-center gap-2 px-[6px]\">\r\n              {TABS.map((tab) => (\r\n                <button\r\n                  key={tab.id}\r\n                  onClick={() => setActiveTab(tab.id)}\r\n                  className={`flex items-center gap-2 px-6 py-3 rounded-[3rem] transition-colors relative ${\r\n                    activeTab === tab.id ? tab.color : \"text-gray-700\"\r\n                  }`}\r\n                >\r\n                  {activeTab === tab.id && (\r\n                    <motion.span\r\n                      layoutId=\"bubble\"\r\n                      className={`absolute inset-0 z-0 ${tab.bg}`}\r\n                      style={{ borderRadius: 9999 }}\r\n                      transition={{\r\n                        type: \"spring\",\r\n                        bounce: 0.19,\r\n                        duration: 0.4,\r\n                      }}\r\n                    />\r\n                  )}\r\n                  <HugeiconsIcon\r\n                    icon={tab.icon}\r\n                    className={`w-5 h-5 relative z-10 ${\r\n                      activeTab === tab.id ? tab.fill : \"\"\r\n                    }`}\r\n                  />\r\n                  <span className=\"font-semibold font-mono uppercase relative z-10\">\r\n                    {tab.label}\r\n                  </span>\r\n                </button>\r\n              ))}\r\n            </div>\r\n          </motion.div>\r\n\r\n          {/* Close Button - positioned absolutely on top */}\r\n          <motion.div\r\n            initial={false}\r\n            animate={{\r\n              opacity: isSearchExpanded ? 1 : 0,\r\n              filter: isSearchExpanded ? \"blur(0px)\" : \"blur(4px)\",\r\n            }}\r\n            transition={{\r\n              duration: 0.2,\r\n            }}\r\n            className=\"absolute inset-0 flex items-center justify-center\"\r\n            style={{ pointerEvents: isSearchExpanded ? \"auto\" : \"none\" }}\r\n          >\r\n            <button\r\n              onClick={() => setIsSearchExpanded(false)}\r\n              className=\"shrink-0 cursor-pointer\"\r\n            >\r\n              <HugeiconsIcon\r\n                icon={MultiplicationSignIcon}\r\n                className=\"w-6 h-6 text-gray-800\"\r\n              />\r\n            </button>\r\n          </motion.div>\r\n        </motion.div>\r\n      </motion.div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}