{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "presence-bookmarks",
  "title": "PresenceBookmarks",
  "description": "Shows stacked user avatars indicating who is present on a cell. Displays a HoverCard with user details and a +N overflow indicator when users exceed the limit.",
  "registryDependencies": [
    "avatar",
    "hover-card"
  ],
  "files": [
    {
      "path": "registry/cell/PresenceBookmarks.tsx",
      "content": "import type * as React from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface User {\n  id: string;\n  name: string;\n  picture?: string;\n  color?: string;\n}\n\nexport interface PresenceBookmarksProps {\n  users: User[];\n  limit?: number;\n  className?: string;\n  renderUserContent?: (user: User) => React.ReactNode;\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((part) => part[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2);\n}\n\nfunction DefaultUserContent({ user }: { user: User }) {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Avatar size=\"lg\">\n        <AvatarImage src={user.picture} alt={user.name} />\n        <AvatarFallback>{getInitials(user.name)}</AvatarFallback>\n      </Avatar>\n      <div className=\"space-y-1\">\n        <p className=\"text-sm font-medium leading-none\">{user.name}</p>\n      </div>\n    </div>\n  );\n}\n\nexport function PresenceBookmarks({\n  users,\n  limit = 5,\n  className,\n  renderUserContent,\n}: PresenceBookmarksProps) {\n  if (users.length === 0) {\n    return null;\n  }\n\n  const visibleUsers = users.slice(0, limit);\n  const overflowCount = users.length - limit;\n\n  return (\n    <div\n      className={cn(\"flex items-center\", className)}\n      data-slot=\"presence-bookmarks\"\n    >\n      {visibleUsers.map((user, index) => (\n        <HoverCard key={user.id} openDelay={200} closeDelay={100}>\n          <HoverCardTrigger asChild>\n            <button\n              type=\"button\"\n              className={cn(\n                \"relative rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring\",\n                index > 0 && \"-ml-2\",\n              )}\n              style={\n                user.color\n                  ? {\n                      boxShadow: `0 0 0 2px ${user.color}`,\n                    }\n                  : undefined\n              }\n            >\n              <Avatar\n                size=\"sm\"\n                className={!user.color ? \"ring-2 ring-border\" : undefined}\n              >\n                <AvatarImage src={user.picture} alt={user.name} />\n                <AvatarFallback>{getInitials(user.name)}</AvatarFallback>\n              </Avatar>\n            </button>\n          </HoverCardTrigger>\n          <HoverCardContent className=\"w-auto\">\n            {renderUserContent ? (\n              renderUserContent(user)\n            ) : (\n              <DefaultUserContent user={user} />\n            )}\n          </HoverCardContent>\n        </HoverCard>\n      ))}\n      {overflowCount > 0 && (\n        <div\n          className={cn(\n            \"-ml-2 flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground ring-2 ring-background\",\n          )}\n        >\n          +{overflowCount}\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/cell/PresenceBookmarks.tsx"
    }
  ],
  "type": "registry:component"
}