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