{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "profile-menu",
  "title": "Profile Menu",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/profile-menu/ProfileMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { BadgeCheck, Bell, CreditCard, LogOut, Sparkles, Settings } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\n\ninterface User {\n  name: string\n  email: string\n  avatar?: string\n}\n\nconst props = withDefaults(\n  defineProps<{\n    user?: User\n  }>(),\n  {\n    user: () => ({ name: 'Alex Morgan', email: 'alex@example.com', avatar: '' }),\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'select', key: 'upgrade' | 'account' | 'billing' | 'notifications' | 'settings' | 'logout'): void\n}>()\n\nconst initials = computed(() => {\n  const parts = props.user.name.trim().split(/\\s+/).slice(0, 2)\n  return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'\n})\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <slot :user=\"user\" :initials=\"initials\">\n        <button\n          type=\"button\"\n          class=\"hover:bg-accent focus-visible:ring-ring flex size-8 items-center justify-center rounded-lg transition-colors focus-visible:ring-1 focus-visible:outline-none\"\n          aria-label=\"Open profile menu\"\n        >\n          <Avatar class=\"size-7\">\n            <AvatarImage v-if=\"user.avatar\" :src=\"user.avatar\" :alt=\"user.name\" />\n            <AvatarFallback class=\"bg-primary/10 text-primary text-[11px] font-semibold\">\n              {{ initials }}\n            </AvatarFallback>\n          </Avatar>\n        </button>\n      </slot>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-60 rounded-lg\" align=\"end\" :side-offset=\"8\">\n      <DropdownMenuLabel class=\"p-0 font-normal\">\n        <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n          <Avatar class=\"size-9 rounded-lg\">\n            <AvatarImage v-if=\"user.avatar\" :src=\"user.avatar\" :alt=\"user.name\" />\n            <AvatarFallback class=\"bg-primary/10 text-primary rounded-lg text-xs font-semibold\">\n              {{ initials }}\n            </AvatarFallback>\n          </Avatar>\n          <div class=\"grid flex-1 text-left leading-tight\">\n            <span class=\"truncate text-sm font-semibold\">{{ user.name }}</span>\n            <span class=\"text-muted-foreground truncate text-xs\">{{ user.email }}</span>\n          </div>\n        </div>\n      </DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem @select=\"emit('select', 'upgrade')\">\n          <Sparkles class=\"size-4\" />\n          Upgrade to Pro\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem @select=\"emit('select', 'account')\">\n          <BadgeCheck class=\"size-4\" />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem @select=\"emit('select', 'billing')\">\n          <CreditCard class=\"size-4\" />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem @select=\"emit('select', 'notifications')\">\n          <Bell class=\"size-4\" />\n          Notifications\n        </DropdownMenuItem>\n        <DropdownMenuItem @select=\"emit('select', 'settings')\">\n          <Settings class=\"size-4\" />\n          Settings\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem @select=\"emit('select', 'logout')\">\n        <LogOut class=\"size-4\" />\n        Log out\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ProfileMenu.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json"
  ],
  "description": "Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.",
  "categories": [
    "dashboard",
    "overlay"
  ]
}