{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox-8",
  "type": "registry:component",
  "title": "Combobox 8",
  "description": "Combobox 8. A combobox component for selecting from a list of options.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "command",
    "label",
    "popover"
  ],
  "files": [
    {
      "path": "components/watermelon/combobox-8.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useId, useState } from 'react'\n\nimport { ChevronsUpDownIcon } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/base-ui/avatar'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList\n} from '@/components/base-ui/command'\nimport { Label } from '@/components/base-ui/label'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/base-ui/popover'\n\ntype UserStatus = 'away' | 'busy' | 'offline' | 'online'\n\ntype UserOption = {\n  avatar: string\n  email: string\n  name: string\n  status: UserStatus\n}\n\nconst users = [\n  {\n    name: 'Maya Chen',\n    email: 'maya.chen@northstar.app',\n    avatar: 'https://i.pravatar.cc/160?img=32',\n    status: 'online'\n  },\n  {\n    name: 'Leo Grant',\n    email: 'leo.grant@fieldnote.co',\n    avatar: 'https://i.pravatar.cc/160?img=12',\n    status: 'offline'\n  },\n  {\n    name: 'Amara Lewis',\n    email: 'amara.lewis@atlas.team',\n    avatar: 'https://i.pravatar.cc/160?img=47',\n    status: 'away'\n  },\n  {\n    name: 'Noah Bennett',\n    email: 'noah.bennett@orbitmail.com',\n    avatar: 'https://i.pravatar.cc/160?img=15',\n    status: 'online'\n  },\n  {\n    name: 'Jade Morris',\n    email: 'jade.morris@studioflow.io',\n    avatar: 'https://i.pravatar.cc/160?img=5',\n    status: 'busy'\n  },\n  {\n    name: 'Elena Park',\n    email: 'elena.park@workframe.dev',\n    avatar: 'https://i.pravatar.cc/160?img=20',\n    status: 'online'\n  }\n] as const satisfies readonly UserOption[]\n\ntype UserName = (typeof users)[number]['name']\ntype UserRecord = (typeof users)[number]\n\nconst userByName: Record<UserName, UserRecord> = {\n  'Maya Chen': users[0],\n  'Leo Grant': users[1],\n  'Amara Lewis': users[2],\n  'Noah Bennett': users[3],\n  'Jade Morris': users[4],\n  'Elena Park': users[5]\n}\n\nconst isUserName = (value: string): value is UserName =>\n  users.some((user) => user.name === value)\n\nconst getInitials = (name: string): string =>\n  name\n    .split(' ')\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase()\n\nconst statusClassNameByValue: Record<UserStatus, string> = {\n  online: 'bg-emerald-500',\n  offline: 'bg-slate-400',\n  away: 'bg-amber-400',\n  busy: 'bg-rose-500'\n}\n\nconst Combobox8 = () => {\n  const id = useId()\n  const [open, setOpen] = useState<boolean>(false)\n  const [selectedUserName, setSelectedUserName] = useState<UserName | ''>('')\n\n  const selectedUser: UserRecord | undefined = selectedUserName\n    ? userByName[selectedUserName]\n    : undefined\n\n  return (\n    <div className='w-full max-w-xs space-y-2'>\n      <Label htmlFor={id} className='text-sm font-medium'>\n        Assignee picker\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          id={id}\n          role='combobox'\n          aria-expanded={open}\n          className='flex h-10 w-full items-center justify-between rounded-3xl border border-border/60 bg-background px-3.5 text-sm shadow-xs outline-none transition-colors hover:bg-accent/20 focus-visible:ring-[3px] focus-visible:ring-ring/50'\n        >\n          {selectedUser ? (\n            <span className='flex min-w-0 items-center gap-2'>\n              <Avatar className='size-6'>\n                <AvatarImage src={selectedUser.avatar} alt={selectedUser.name} />\n                <AvatarFallback>{getInitials(selectedUser.name)}</AvatarFallback>\n              </Avatar>\n              <span className='truncate font-medium'>{selectedUser.name}</span>\n            </span>\n          ) : (\n            <span className='text-muted-foreground'>Select assignee</span>\n          )}\n          <ChevronsUpDownIcon\n            className='text-muted-foreground/80 size-4 shrink-0'\n            aria-hidden='true'\n          />\n        </PopoverTrigger>\n        <PopoverContent className='w-75 overflow-hidden rounded-2xl border border-border/60 p-0 shadow-sm'>\n          <Command className='rounded-3xl!'>\n            <CommandInput placeholder='Search assignee...' className='h-9 px-1' />\n            <CommandList>\n              <CommandEmpty>No assignee found.</CommandEmpty>\n              <CommandGroup>\n                {users.map((user) => (\n                  <CommandItem\n                    key={user.name}\n                    value={user.name}\n                    data-checked={selectedUserName === user.name}\n                    onSelect={(currentValue) => {\n                      if (currentValue === selectedUserName) {\n                        setSelectedUserName('')\n                        setOpen(false)\n                        return\n                      }\n\n                      if (!isUserName(currentValue)) {\n                        return\n                      }\n\n                      setSelectedUserName(currentValue)\n                      setOpen(false)\n                    }}\n                    className='rounded-lg pr-2'\n                  >\n                    <span className='flex min-w-0 flex-1 items-center gap-2'>\n                      <span className='relative shrink-0'>\n                        <Avatar className='size-7'>\n                          <AvatarImage src={user.avatar} alt={user.name} />\n                          <AvatarFallback>{getInitials(user.name)}</AvatarFallback>\n                        </Avatar>\n                        <span\n                          className={`absolute right-0 bottom-0 size-2 rounded-full ring-2 ring-background ${statusClassNameByValue[user.status]}`}\n                        />\n                      </span>\n                      <span className='flex min-w-0 flex-col'>\n                        <span className='truncate font-medium'>{user.name}</span>\n                        <span className='text-muted-foreground truncate text-sm'>\n                          {user.email}\n                        </span>\n                      </span>\n                    </span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n\nexport default Combobox8\n"
    }
  ]
}