{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-menu-dropdown",
  "title": "User Menu Dropdown",
  "description": "Navbar dropdown for user account with header banner, avatar, menu items, and sign out button.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-dropdown.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-button.json"
  ],
  "files": [
    {
      "path": "registry/new-york/user-menu-dropdown/components/user-menu-dropdown.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface UserMenuItem {\n  icon: React.ReactNode\n  text: string\n  href?: string\n  badge?: React.ReactNode\n}\n\ninterface UserMenuDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n  avatarUrl: string\n  name: string\n  memberSince: string\n  headerBg?: string\n  menuItems?: UserMenuItem[]\n  onSignOut?: () => void\n  onProfile?: () => void\n}\n\nconst UserMenuDropdown = React.forwardRef<HTMLDivElement, UserMenuDropdownProps>(\n  (\n    {\n      className,\n      avatarUrl,\n      name,\n      memberSince,\n      headerBg,\n      menuItems = [],\n      onSignOut,\n      onProfile,\n      ...props\n    },\n    ref\n  ) => {\n    const [isOpen, setIsOpen] = React.useState(false)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n\n    React.useEffect(() => {\n      const handleClickOutside = (e: MouseEvent) => {\n        if (\n          containerRef.current &&\n          !containerRef.current.contains(e.target as Node)\n        ) {\n          setIsOpen(false)\n        }\n      }\n      if (isOpen) {\n        document.addEventListener(\"mousedown\", handleClickOutside)\n      }\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside)\n    }, [isOpen])\n\n    return (\n      <div\n        ref={(node) => {\n          ;(\n            containerRef as React.MutableRefObject<HTMLDivElement | null>\n          ).current = node\n          if (typeof ref === \"function\") ref(node)\n          else if (ref) ref.current = node\n        }}\n        className={cn(\"relative inline-block\", className)}\n        {...props}\n      >\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"flex items-center gap-[8px] h-[50px] px-[15px] bg-transparent border-none text-[var(--adminlte-skin-navbar-color)] cursor-pointer hover:bg-black/10\"\n        >\n          <img\n            src={avatarUrl}\n            alt={name}\n            className=\"w-[25px] h-[25px] rounded-full object-cover\"\n          />\n          <span className=\"text-[14px] hidden sm:inline\">{name}</span>\n        </button>\n\n        {isOpen && (\n          <ul className=\"absolute right-0 z-[1000] min-w-[280px] py-0 mt-0 bg-white border border-[#ccc] rounded-[3px] shadow-[0_6px_12px_rgba(0,0,0,0.175)] list-none overflow-hidden\">\n            {/* Header */}\n            <li\n              className=\"p-[20px] text-center text-white\"\n              style={{\n                background:\n                  headerBg || \"var(--adminlte-skin-navbar-bg, #3c8dbc)\",\n              }}\n            >\n              <img\n                src={avatarUrl}\n                alt={name}\n                className=\"w-[80px] h-[80px] rounded-full mx-auto mb-[10px] border-[3px] border-white/30 object-cover\"\n              />\n              <p className=\"text-[17px] font-semibold m-0\">{name}</p>\n              <p className=\"text-[13px] opacity-80 m-0 mt-[4px]\">\n                Member since {memberSince}\n              </p>\n            </li>\n\n            {/* Menu items in 2-column grid */}\n            {menuItems.length > 0 && (\n              <li className=\"p-[10px] border-b border-[#f4f4f4]\">\n                <div className=\"grid grid-cols-2 gap-[5px]\">\n                  {menuItems.map((item, index) => (\n                    <a\n                      key={index}\n                      href={item.href || \"#\"}\n                      className=\"flex items-center gap-[6px] px-[8px] py-[8px] text-[13px] text-[#333] no-underline rounded hover:bg-[#f4f4f4]\"\n                    >\n                      <span className=\"flex-shrink-0\">{item.icon}</span>\n                      <span className=\"truncate\">{item.text}</span>\n                      {item.badge && (\n                        <span className=\"ml-auto flex-shrink-0\">\n                          {item.badge}\n                        </span>\n                      )}\n                    </a>\n                  ))}\n                </div>\n              </li>\n            )}\n\n            {/* Footer */}\n            <li className=\"flex items-center justify-between px-[10px] py-[10px] bg-[#f4f4f4]\">\n              <button\n                onClick={() => {\n                  setIsOpen(false)\n                  onProfile?.()\n                }}\n                className=\"px-[15px] py-[5px] text-[12px] bg-[#3c8dbc] text-white border border-[#367fa9] rounded-[3px] cursor-pointer hover:bg-[#367fa9]\"\n              >\n                Profile\n              </button>\n              <button\n                onClick={() => {\n                  setIsOpen(false)\n                  onSignOut?.()\n                }}\n                className=\"px-[15px] py-[5px] text-[12px] bg-[#dd4b39] text-white border border-[#d73925] rounded-[3px] cursor-pointer hover:bg-[#d73925]\"\n              >\n                Sign out\n              </button>\n            </li>\n          </ul>\n        )}\n      </div>\n    )\n  }\n)\nUserMenuDropdown.displayName = \"UserMenuDropdown\"\n\nexport { UserMenuDropdown }\nexport type { UserMenuDropdownProps, UserMenuItem }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}