{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-menu",
  "title": "Bottom Menu",
  "description": "A floating bottom navigation menu with smooth interactions.",
  "dependencies": [
    "motion",
    "react-use-measure",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/bottom-menu.tsx",
      "content": "\"use client\";\r\n\r\nimport {\r\n  Notification03Icon,\r\n  Search01Icon,\r\n  Sun03Icon,\r\n  Moon02Icon,\r\n  ComputerIcon,\r\n  UserEdit01Icon,\r\n  PlusSignIcon,\r\n  Mic01Icon,\r\n  Camera01Icon,\r\n  PencilEdit02Icon,\r\n  FilterHorizontalIcon,\r\n  AutoConversationsIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport React, { useMemo, useState, useRef, useEffect } from \"react\";\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\nimport useMeasure from \"react-use-measure\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Change Here\r\nconst MAIN_NAV = [\r\n  { icon: PlusSignIcon, name: \"home\" },\r\n  { icon: Search01Icon, name: \"search\" },\r\n  { icon: Notification03Icon, name: \"notifications\" },\r\n  { icon: UserEdit01Icon, name: \"profile\" },\r\n  { icon: Sun03Icon, name: \"theme\" },\r\n];\r\n\r\nconst HOME_ITEMS = [\r\n  { icon: PencilEdit02Icon, text: \"Note\" },\r\n  { icon: Mic01Icon, text: \"Voice\" },\r\n  { icon: Camera01Icon, text: \"Screenshot\" },\r\n];\r\n\r\nconst SEARCH_OPTIONS = [\r\n  { icon: FilterHorizontalIcon, text: \"Filter\" },\r\n  { icon: AutoConversationsIcon, text: \"Trending\" },\r\n];\r\n\r\nconst NOTIFICATION_TYPES = [\"Messages\", \"System Alerts\"];\r\n\r\nconst PROFILE_LINKS = [\"My Account\", \"Settings\", \"Subscription / Billing\"];\r\n\r\nconst THEME_OPTIONS = [\r\n  { key: \"light\", icon: Sun03Icon, text: \"Light\" },\r\n  { key: \"dark\", icon: Moon02Icon, text: \"Dark\" },\r\n  { key: \"system\", icon: ComputerIcon, text: \"System\" },\r\n];\r\n\r\nconst BottomMenu = () => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const [elementRef] = useMeasure();\r\n  const [hiddenRef, hiddenBounds] = useMeasure();\r\n  const [view, setView] = useState<\r\n    \"default\" | \"home\" | \"search\" | \"notifications\" | \"profile\" | \"theme\"\r\n  >(\"default\");\r\n\r\n  // Track selected theme\r\n  const [theme, setTheme] = useState<\"light\" | \"dark\" | \"system\">(\"light\");\r\n  useEffect(() => {\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      if (\r\n        containerRef.current &&\r\n        !containerRef.current.contains(event.target as Node)\r\n      ) {\r\n        setView(\"default\");\r\n      }\r\n    };\r\n\r\n    document.addEventListener(\"mousedown\", handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener(\"mousedown\", handleClickOutside);\r\n    };\r\n  }, []);\r\n\r\n  const sharedHover =\r\n    \"group transition-all duration-75 px-3 py-2 text-[15px] text-muted-foreground w-full text-left rounded-[12px] hover:bg-muted/80 hover:text-foreground\";\r\n\r\n  const content = useMemo(() => {\r\n    switch (view) {\r\n      case \"default\":\r\n        return null;\r\n\r\n      case \"home\":\r\n        return (\r\n          <div className=\"space-y-0.5 min-w-[210px] p-[6px] py-0.5\">\r\n            {HOME_ITEMS.map(({ icon: Icon, text }) => (\r\n              <button\r\n                key={text}\r\n                className={`${sharedHover} flex items-center gap-3`}\r\n              >\r\n                <HugeiconsIcon\r\n                  icon={Icon}\r\n                  size={20}\r\n                  className=\"text-muted-foreground group-hover:text-foreground transition-all duration-75\"\r\n                />\r\n                <span className=\"transition-all duration-75\">{text}</span>\r\n              </button>\r\n            ))}\r\n          </div>\r\n        );\r\n\r\n      case \"search\":\r\n        return (\r\n          <div className=\"space-y-2 min-w-[270px] p-[8px] py-1\">\r\n            <div className=\"relative\">\r\n              <HugeiconsIcon\r\n                icon={Search01Icon}\r\n                size={17}\r\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\r\n              />\r\n              <input\r\n                type=\"text\"\r\n                placeholder=\"Search...\"\r\n                className=\"w-full pl-9 pr-3 py-[6px] text-[14.5px] text-foreground bg-muted/80 border border-border rounded-[12px] focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent placeholder:text-muted-foreground/50\"\r\n              />\r\n            </div>\r\n            <div className=\"flex gap-1.5\">\r\n              {SEARCH_OPTIONS.map(({ icon: Icon, text }) => (\r\n                <button\r\n                  key={text}\r\n                  className={`${sharedHover} flex-1 flex items-center justify-center gap-1.5 bg-muted hover:bg-accent`}\r\n                >\r\n                  <HugeiconsIcon\r\n                    icon={Icon}\r\n                    size={14}\r\n                    strokeWidth={2}\r\n                    className=\"text-muted-foreground group-hover:text-foreground transition-all duration-75\"\r\n                  />\r\n                  <span className=\"transition-all duration-75\">{text}</span>\r\n                </button>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        );\r\n\r\n      case \"notifications\":\r\n        return (\r\n          <div className=\"space-y-0.5 min-w-[210px] p-[6px] py-0.5\">\r\n            {NOTIFICATION_TYPES.map((t) => (\r\n              <button key={t} className={sharedHover}>\r\n                <span className=\"transition-all duration-75\">{t}</span>\r\n              </button>\r\n            ))}\r\n          </div>\r\n        );\r\n\r\n      case \"profile\":\r\n        return (\r\n          <div className=\"space-y-0.5 min-w-[230px] p-[6px] py-0.5\">\r\n            {PROFILE_LINKS.map((t) => (\r\n              <button key={t} className={sharedHover}>\r\n                <span className=\"transition-all duration-75\">{t}</span>\r\n              </button>\r\n            ))}\r\n            <div className=\"border-t border-border my-[2px]\" />\r\n            <button className=\"px-3 py-2 text-[15px] text-destructive w-full text-left rounded-[12px] hover:bg-destructive/10 transition-all duration-75\">\r\n              Logout\r\n            </button>\r\n          </div>\r\n        );\r\n\r\n      case \"theme\":\r\n        return (\r\n          <div className=\"flex items-center justify-between gap-1.5 min-w-[270px] p-[6px] py-0.5\">\r\n            {THEME_OPTIONS.map(({ key, icon: Icon, text }) => (\r\n              <button\r\n                key={key}\r\n                onClick={() => setTheme(key as \"light\" | \"dark\" | \"system\")}\r\n                className={`flex items-center justify-center gap-2 rounded-[12px] px-3 py-2 transition-all duration-100 ${\r\n                  theme === key\r\n                    ? \"bg-accent text-foreground\"\r\n                    : \"text-muted-foreground hover:bg-muted\"\r\n                }`}\r\n              >\r\n                <HugeiconsIcon\r\n                  icon={Icon}\r\n                  size={18}\r\n                  className={`transition-all duration-75 ${\r\n                    theme === key ? \"text-foreground\" : \"text-muted-foreground\"\r\n                  }`}\r\n                />\r\n                <span>{text}</span>\r\n              </button>\r\n            ))}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  }, [view, theme]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={cn(\"relative flex flex-col items-center\")}\r\n    >\r\n      {/* Hidden for measurement */}\r\n      <div\r\n        ref={hiddenRef}\r\n        className=\"absolute left-[-9999px] top-[-9999px] invisible pointer-events-none\"\r\n      >\r\n        <div className=\"rounded-[18px] bg-background/95 border border-border py-1\">\r\n          {content}\r\n        </div>\r\n      </div>\r\n\r\n      {/* Animated submenu */}\r\n      <AnimatePresence mode=\"wait\">\r\n        {view !== \"default\" && (\r\n          <motion.div\r\n            key=\"submenu\"\r\n            initial={{\r\n              opacity: 0,\r\n              scaleY: 0.9,\r\n              scaleX: 0.95,\r\n              height: 0,\r\n              width: 0,\r\n              originY: 1,\r\n              originX: 0.5,\r\n            }}\r\n            animate={{\r\n              opacity: 1,\r\n              scaleY: 1,\r\n              scaleX: 1,\r\n              height: hiddenBounds.height || \"auto\",\r\n              width: hiddenBounds.width || \"auto\",\r\n              originY: 1,\r\n              originX: 0.5,\r\n            }}\r\n            exit={{\r\n              opacity: 0,\r\n              scaleY: 0.9,\r\n              scaleX: 0.95,\r\n              height: 0,\r\n              width: 0,\r\n              originY: 1,\r\n              originX: 0.5,\r\n            }}\r\n            transition={{\r\n              duration: 0.3,\r\n              ease: [0.45, 0, 0.25, 1],\r\n            }}\r\n            style={{\r\n              transformOrigin: \"bottom center\",\r\n            }}\r\n            className=\"absolute bottom-[70px] overflow-hidden\"\r\n          >\r\n            <div\r\n              ref={elementRef}\r\n              className=\"rounded-[18px] bg-background/95 backdrop-blur-xl border border-border\"\r\n            >\r\n              <AnimatePresence initial={false} mode=\"popLayout\">\r\n                <motion.div\r\n                  key={view}\r\n                  initial={{\r\n                    opacity: 0,\r\n                    scale: 0.96,\r\n                    filter: \"blur(10px)\",\r\n                  }}\r\n                  animate={{\r\n                    opacity: 1,\r\n                    scale: 1,\r\n                    filter: \"blur(0px)\",\r\n                  }}\r\n                  exit={{\r\n                    opacity: 0,\r\n                    scale: 0.95,\r\n                    filter: \"blur(12px)\",\r\n                  }}\r\n                  transition={{\r\n                    duration: 0.25,\r\n                    ease: [0.42, 0, 0.58, 1],\r\n                  }}\r\n                  className=\"py-1\"\r\n                >\r\n                  {content}\r\n                </motion.div>\r\n              </AnimatePresence>\r\n            </div>\r\n          </motion.div>\r\n        )}\r\n      </AnimatePresence>\r\n\r\n      {/* Toolbar */}\r\n      <div className=\"flex items-center gap-1 bg-background/95 backdrop-blur-xl border border-border rounded-[18px] p-1 mt-3 z-10\">\r\n        {MAIN_NAV.map(({ icon: Icon, name }) => (\r\n          <button\r\n            key={name}\r\n            className={`p-3 rounded-[16px] transition-all ${\r\n              view === name ? \"bg-accent\" : \"hover:bg-muted\"\r\n            }`}\r\n            onClick={() => setView(view === name ? \"default\" : (name as any))}\r\n          >\r\n            <HugeiconsIcon\r\n              icon={Icon}\r\n              size={22}\r\n              className={`transition-all ${\r\n                view === name ? \"text-foreground\" : \"text-muted-foreground\"\r\n              }`}\r\n            />\r\n          </button>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default BottomMenu;\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}