{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dropdown-01","type":"registry:component","title":"User Profile Dropdown","description":"A sophisticated user profile dropdown component with avatar, user information, role badges, and customizable menu actions. Supports different sizes and profile display modes.","dependencies":["lucide-react"],"registryDependencies":["avatar","badge","button","dropdown-menu"],"files":[{"path":"src/registry/blocks/application/interactive/dropdowns/dropdown-01.tsx","content":"\"use client\";\n\nimport { LogOut, Settings, User } from \"lucide-react\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\n\ninterface UserInfo {\n  name: string;\n  email: string;\n  avatar: string;\n  initials: string;\n  role: string;\n  plan: string;\n}\n\nexport interface Dropdown01Props {\n  className?: string;\n}\n\nconst content: {\n  user: UserInfo;\n  buttons: {\n    profile: { text: string; icon: typeof User };\n    settings: { text: string; icon: typeof Settings };\n    logout: { text: string; icon: typeof LogOut };\n  };\n  size: \"sm\" | \"md\" | \"lg\";\n  showFullProfile: boolean;\n} = {\n  user: {\n    name: \"Sarah Chen\",\n    email: \"sarah.chen@company.com\",\n    avatar: \"https://randomuser.me/api/portraits/women/1.jpg\",\n    initials: \"SC\",\n    role: \"Product Manager\",\n    plan: \"Pro\",\n  },\n  buttons: {\n    profile: {\n      text: \"Profile\",\n      icon: User,\n    },\n    settings: {\n      text: \"Settings\",\n      icon: Settings,\n    },\n    logout: {\n      text: \"Log out\",\n      icon: LogOut,\n    },\n  },\n  size: \"md\",\n  showFullProfile: true,\n};\n\nexport function Dropdown01({ className }: Dropdown01Props) {\n  const avatarSizes = {\n    sm: \"h-6 w-6\",\n    md: \"h-8 w-8\",\n    lg: \"h-9 w-9\",\n  };\n\n  const buttonSizes = {\n    sm: \"h-7 w-7\",\n    md: \"h-8 w-8\",\n    lg: \"h-9 w-9\",\n  };\n\n  const handleProfileClick = () => {\n    console.log(\"Profile clicked\");\n  };\n\n  const handleSettingsClick = () => {\n    console.log(\"Settings clicked\");\n  };\n\n  const handleLogoutClick = () => {\n    console.log(\"Logout clicked\");\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className={cn(\n            \"relative rounded-full\",\n            buttonSizes[content.size],\n            className,\n          )}\n          data-testid=\"user-menu-trigger\"\n        >\n          <Avatar className={avatarSizes[content.size]}>\n            <AvatarImage src={content.user.avatar} alt={content.user.name} />\n            <AvatarFallback>{content.user.initials}</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className={content.showFullProfile ? \"w-64\" : \"w-56\"}\n        align=\"end\"\n        data-testid=\"user-menu-content\"\n      >\n        <DropdownMenuLabel\n          className=\"font-normal\"\n          data-testid=\"user-profile-info\"\n        >\n          {content.showFullProfile ? (\n            <div className=\"flex items-center space-x-3 p-2\">\n              <Avatar className=\"h-10 w-10\">\n                <AvatarImage\n                  src={content.user.avatar}\n                  alt={content.user.name}\n                />\n                <AvatarFallback>{content.user.initials}</AvatarFallback>\n              </Avatar>\n              <div className=\"flex flex-col space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {content.user.name}\n                </p>\n                <p className=\"text-xs leading-none text-muted-foreground\">\n                  {content.user.email}\n                </p>\n                <div className=\"flex items-center space-x-2 mt-2\">\n                  <Badge\n                    variant=\"outline\"\n                    className=\"text-xs\"\n                    data-testid=\"user-plan-badge\"\n                  >\n                    {content.user.plan}\n                  </Badge>\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"text-xs\"\n                    data-testid=\"user-role-badge\"\n                  >\n                    {content.user.role}\n                  </Badge>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex flex-col space-y-1\">\n              <p className=\"text-sm font-medium leading-none\">\n                {content.user.name}\n              </p>\n              <p className=\"text-xs leading-none text-muted-foreground\">\n                {content.user.email}\n              </p>\n            </div>\n          )}\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem\n          onClick={handleProfileClick}\n          data-testid=\"profile-menu-item\"\n        >\n          <content.buttons.profile.icon className=\"mr-2 h-4 w-4\" />\n          <span>{content.buttons.profile.text}</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          onClick={handleSettingsClick}\n          data-testid=\"settings-menu-item\"\n        >\n          <content.buttons.settings.icon className=\"mr-2 h-4 w-4\" />\n          <span>{content.buttons.settings.text}</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem\n          onClick={handleLogoutClick}\n          className=\"text-destructive\"\n          data-testid=\"logout-menu-item\"\n        >\n          <content.buttons.logout.icon className=\"mr-2 h-4 w-4\" />\n          <span>{content.buttons.logout.text}</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}