{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-selector",
  "title": "UserSelector",
  "dependencies": [
    "lucide-react@1.14.0"
  ],
  "registryDependencies": [
    "@birchline/avatar",
    "@birchline/badge",
    "@birchline/checkbox",
    "@birchline/command",
    "@birchline/popover",
    "@birchline/tokens",
    "@birchline/utils"
  ],
  "files": [
    {
      "path": "src/components/ui/user-selector.tsx",
      "content": "import { useState, useMemo } from \"react\"\nimport { Check, UserPlus, UserRound, X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from \"@/components/ui/command\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\nfunction HighlightMatch({ text, query }: { text: string; query: string }) {\n  if (!query || query.length < 1) return <>{text}</>\n  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`, \"gi\")\n  const parts = text.split(regex)\n  return (\n    <>\n      {parts.map((part, i) =>\n        regex.test(part) ? (\n          <mark key={i} className=\"bg-highlight text-foreground rounded-xs px-0.5\">{part}</mark>\n        ) : (\n          part\n        )\n      )}\n    </>\n  )\n}\n\nexport type UserRole = \"Admin\" | \"Collaborator\" | \"Guest\"\n\nexport interface User {\n  id: string\n  name: string\n  email: string\n  initials: string\n  role: UserRole\n}\n\ninterface UserSelectorProps {\n  users: User[]\n  recentIds?: string[]\n  value?: string | null\n  onSelect?: (userId: string | null) => void\n  multiSelect?: boolean\n  values?: string[]\n  onValuesChange?: (userIds: string[]) => void\n  onInvite?: () => void\n  placeholder?: string\n  noAssigneeLabel?: string\n  showNoAssignee?: boolean\n  clearable?: boolean\n  className?: string\n}\n\nconst roleBadgeVariant: Record<UserRole, \"accent\" | \"muted\"> = {\n  Admin: \"accent\",\n  Collaborator: \"accent\",\n  Guest: \"muted\",\n}\n\nfunction getRoleAvatarColor(role: UserRole) {\n  return role === \"Guest\" ? \"bg-gray-500 text-primary-foreground\" : \"bg-primary text-primary-foreground\"\n}\n\nfunction UserRow({\n  user,\n  selected,\n  onSelect,\n  search,\n  multiSelect,\n}: {\n  user: User\n  selected: boolean\n  onSelect: () => void\n  search?: string\n  multiSelect?: boolean\n}) {\n  return (\n    <CommandItem\n      value={`${user.name} ${user.email}`}\n      onSelect={onSelect}\n      className=\"flex items-center gap-3 px-3 py-2.5\"\n    >\n      <span className=\"w-5 shrink-0 flex items-center justify-center\">\n        {multiSelect ? (\n          <Checkbox checked={selected} tabIndex={-1} className=\"pointer-events-none\" />\n        ) : (\n          selected && <Check className=\"h-4 w-4 text-foreground\" />\n        )}\n      </span>\n      <Avatar className=\"h-8 w-8 shrink-0\">\n        <AvatarFallback className={cn(\"text-xs font-medium\", getRoleAvatarColor(user.role))}>\n          {user.initials}\n        </AvatarFallback>\n      </Avatar>\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm font-medium truncate\"><HighlightMatch text={user.name} query={search ?? \"\"} /></span>\n          <Badge variant={roleBadgeVariant[user.role]} className=\"text-[11px] px-1.5 py-0 h-5 shrink-0\">\n            {user.role}\n          </Badge>\n        </div>\n        <div className=\"text-xs text-muted-foreground truncate\"><HighlightMatch text={user.email} query={search ?? \"\"} /></div>\n      </div>\n    </CommandItem>\n  )\n}\n\nfunction UserSelector({\n  users,\n  recentIds = [],\n  value,\n  onSelect,\n  multiSelect = false,\n  values = [],\n  onValuesChange,\n  onInvite,\n  placeholder = \"Select user…\",\n  noAssigneeLabel = \"No Assignee\",\n  showNoAssignee = true,\n  clearable = false,\n  className,\n}: UserSelectorProps) {\n  const [open, setOpen] = useState(false)\n  const [search, setSearch] = useState(\"\")\n\n  const selectedUser = useMemo(\n    () => users.find((u) => u.id === value) ?? null,\n    [users, value]\n  )\n\n  const selectedUsers = useMemo(\n    () => users.filter((u) => values.includes(u.id)),\n    [users, values]\n  )\n\n  const recentUsers = useMemo(\n    () => recentIds.map((id) => users.find((u) => u.id === id)).filter(Boolean) as User[],\n    [users, recentIds]\n  )\n\n  const nonRecentUsers = useMemo(\n    () => users.filter((u) => !recentIds.includes(u.id)),\n    [users, recentIds]\n  )\n\n  function handleSelect(userId: string | null) {\n    onSelect?.(userId)\n    setOpen(false)\n    setSearch(\"\")\n  }\n\n  function handleMultiToggle(userId: string) {\n    const next = values.includes(userId)\n      ? values.filter((id) => id !== userId)\n      : [...values, userId]\n    onValuesChange?.(next)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={(v) => { setOpen(v); if (!v) setSearch(\"\") }}>\n      <PopoverTrigger asChild>\n        <button\n          className={cn(\n            \"flex items-center gap-2 h-10 px-2 rounded-sm border border-border bg-card text-sm\",\n            \"hover:bg-accent transition-colors\",\n            \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40 focus-visible:outline-none\",\n            className\n          )}\n        >\n          {multiSelect ? (\n            selectedUsers.length > 0 ? (\n              <>\n                <div className=\"flex items-center -space-x-1.5\">\n                  {selectedUsers.slice(0, 3).map((u) => (\n                    <Avatar key={u.id} className=\"h-6 w-6 border-2 border-card\">\n                      <AvatarFallback className={cn(\"text-[10px] font-medium\", getRoleAvatarColor(u.role))}>\n                        {u.initials}\n                      </AvatarFallback>\n                    </Avatar>\n                  ))}\n                </div>\n                <span className=\"font-medium\">\n                  {selectedUsers.length === 1 ? selectedUsers[0].name : `${selectedUsers.length} users`}\n                </span>\n                {clearable && (\n                  <span\n                    role=\"button\"\n                    onClick={(e) => { e.stopPropagation(); onValuesChange?.([]) }}\n                    className=\"ml-auto text-muted-foreground hover:text-foreground transition-colors\"\n                  >\n                    <X className=\"h-3.5 w-3.5\" />\n                  </span>\n                )}\n              </>\n            ) : (\n              <>\n                <div className=\"h-6 w-6 rounded-full border-[1.5px] border-dashed border-border flex items-center justify-center shrink-0\">\n                  <UserRound className=\"h-3 w-3 text-gray-300\" />\n                </div>\n                <span className=\"text-muted-foreground\">{noAssigneeLabel}</span>\n              </>\n            )\n          ) : selectedUser ? (\n            <>\n              <Avatar className=\"h-6 w-6\">\n                <AvatarFallback className={cn(\"text-[10px] font-medium\", getRoleAvatarColor(selectedUser.role))}>\n                  {selectedUser.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"font-medium\">{selectedUser.name}</span>\n              {clearable && (\n                <span\n                  role=\"button\"\n                  onClick={(e) => { e.stopPropagation(); onSelect?.(null) }}\n                  className=\"ml-auto text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  <X className=\"h-3.5 w-3.5\" />\n                </span>\n              )}\n            </>\n          ) : value === null ? (\n            <>\n              <div className=\"h-6 w-6 rounded-full border-[1.5px] border-dashed border-border flex items-center justify-center shrink-0\">\n                <UserRound className=\"h-3 w-3 text-gray-300\" />\n              </div>\n              <span className=\"text-muted-foreground\">{noAssigneeLabel}</span>\n            </>\n          ) : (\n            <span className=\"text-muted-foreground\">{placeholder}</span>\n          )}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-fit min-w-[280px] max-w-[400px] p-0\"\n        align=\"start\"\n        side=\"bottom\"\n        collisionPadding={16}\n        sticky=\"always\"\n      >\n        <Command filter={(value, search) => {\n            return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0\n          }}>\n          <div className=\"relative\">\n            <CommandInput\n              placeholder=\"Search users\"\n              value={search}\n              onValueChange={setSearch}\n            />\n            {search.length > 0 && (\n              <button\n                onClick={() => setSearch(\"\")}\n                className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n              >\n                <X className=\"h-3.5 w-3.5\" />\n              </button>\n            )}\n          </div>\n          <CommandList className=\"max-h-[calc(var(--radix-popover-content-available-height,50vh)-64px-44px)] overflow-y-auto\">\n            <CommandEmpty>No users found.</CommandEmpty>\n            {!search && showNoAssignee && (\n              <CommandGroup>\n                <CommandItem\n                  value=\"no-assignee\"\n                  onSelect={() => { if (multiSelect) { onValuesChange?.([]); setOpen(false); setSearch(\"\") } else { handleSelect(null) } }}\n                  className=\"flex items-center gap-3 px-3 py-2.5\"\n                >\n                  <span className=\"w-5 shrink-0 flex items-center justify-center\">\n                    {value === null && <Check className=\"h-4 w-4 text-foreground\" />}\n                  </span>\n                  <div className=\"h-8 w-8 rounded-full border-2 border-dashed border-border flex items-center justify-center shrink-0\">\n                    <UserRound className=\"h-4 w-4 text-gray-300\" />\n                  </div>\n                  <span className=\"text-sm font-medium\">No Assignee</span>\n                </CommandItem>\n              </CommandGroup>\n            )}\n            {recentUsers.length > 0 && (\n              <>\n                {!search && showNoAssignee && <CommandSeparator />}\n                <CommandGroup heading=\"Recents\">\n                  {recentUsers.map((user) => (\n                    <UserRow\n                      key={user.id}\n                      user={user}\n                      selected={multiSelect ? values.includes(user.id) : value === user.id}\n                      onSelect={() => multiSelect ? handleMultiToggle(user.id) : handleSelect(user.id)}\n                      search={search}\n                      multiSelect={multiSelect}\n                    />\n                  ))}\n                </CommandGroup>\n              </>\n            )}\n            {nonRecentUsers.length > 0 && (\n              <>\n                {((!search && showNoAssignee) || recentUsers.length > 0) && <CommandSeparator />}\n                <CommandGroup heading=\"Users\">\n                  {nonRecentUsers.map((user) => (\n                    <UserRow\n                      key={user.id}\n                      user={user}\n                      selected={multiSelect ? values.includes(user.id) : value === user.id}\n                      onSelect={() => multiSelect ? handleMultiToggle(user.id) : handleSelect(user.id)}\n                      search={search}\n                      multiSelect={multiSelect}\n                    />\n                  ))}\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n          {onInvite && !search && (\n            <div className=\"border-t border-border\">\n              <CommandGroup>\n                <CommandItem\n                  onSelect={() => { onInvite(); setOpen(false) }}\n                  className=\"flex items-center gap-3 px-3 py-1\"\n                >\n                  <span className=\"w-5 shrink-0\" />\n                  <div className=\"h-8 w-8 flex items-center justify-center shrink-0\">\n                    <UserPlus className=\"h-4 w-4 text-muted-foreground\" />\n                  </div>\n                  <span className=\"text-sm\">Invite User</span>\n                </CommandItem>\n              </CommandGroup>\n            </div>\n          )}\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { UserSelector }\n",
      "type": "registry:ui",
      "target": "components/ui/user-selector.tsx"
    }
  ],
  "type": "registry:ui"
}