{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-combobox-23","type":"registry:block","title":"A lead selection combobox","description":"A lead selection combobox","dependencies":["cn"],"registryDependencies":["avatar","button","combobox","field","item"],"files":[{"path":"c-combobox-23.tsx","type":"registry:block","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"cn\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Combobox,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/components/ui/combobox\"\nimport { Field } from \"@/components/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NoLeadOption = {\n  type: \"none\"\n  value: \"none\"\n  label: \"No lead\"\n}\n\ntype TeamMember = {\n  type: \"member\"\n  id: string\n  value: string\n  label: string\n  avatar: string\n  initials: string\n  isCurrentUser?: boolean\n}\n\ntype LeadOption = NoLeadOption | TeamMember\n\nconst noLeadOption: NoLeadOption = {\n  type: \"none\",\n  value: \"none\",\n  label: \"No lead\",\n}\n\nconst teamMembers: TeamMember[] = [\n  {\n    type: \"member\",\n    id: \"member-1\",\n    value: \"shuhrat-saipov\",\n    label: \"Shuhrat Saipov\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80\",\n    initials: \"SS\",\n    isCurrentUser: true,\n  },\n  {\n    type: \"member\",\n    id: \"member-2\",\n    value: \"nadia-karimova\",\n    label: \"Nadia Karimova\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80\",\n    initials: \"NK\",\n  },\n  {\n    type: \"member\",\n    id: \"member-3\",\n    value: \"bekzod-rakhimov\",\n    label: \"Bekzod Rakhimov\",\n    avatar:\n      \"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=96&h=96&dpr=2&q=80\",\n    initials: \"BR\",\n  },\n  {\n    type: \"member\",\n    id: \"member-4\",\n    value: \"lina-bauer\",\n    label: \"Lina Bauer\",\n    avatar:\n      \"https://images.unsplash.com/photo-1517841905240-472988babdf9?w=96&h=96&dpr=2&q=80\",\n    initials: \"LB\",\n  },\n  {\n    type: \"member\",\n    id: \"member-5\",\n    value: \"omar-haddad\",\n    label: \"Omar Haddad\",\n    avatar:\n      \"https://images.unsplash.com/photo-1504593811423-6dd665756598?w=96&h=96&dpr=2&q=80\",\n    initials: \"OH\",\n  },\n  {\n    type: \"member\",\n    id: \"member-6\",\n    value: \"priya-nand\",\n    label: \"Priya Nand\",\n    avatar:\n      \"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=96&h=96&dpr=2&q=80\",\n    initials: \"PN\",\n  },\n  {\n    type: \"member\",\n    id: \"member-7\",\n    value: \"kenji-watan\",\n    label: \"Kenji Watan\",\n    avatar:\n      \"https://images.unsplash.com/photo-1504257432389-52343af06ae3?w=96&h=96&dpr=2&q=80\",\n    initials: \"KW\",\n  },\n  {\n    type: \"member\",\n    id: \"member-8\",\n    value: \"ava-sinclair\",\n    label: \"Ava Sinclair\",\n    avatar:\n      \"https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=96&h=96&dpr=2&q=80\",\n    initials: \"AS\",\n  },\n  {\n    type: \"member\",\n    id: \"member-9\",\n    value: \"nia-okafor\",\n    label: \"Nia Okafor\",\n    avatar:\n      \"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=96&h=96&dpr=2&q=80\",\n    initials: \"NO\",\n  },\n  {\n    type: \"member\",\n    id: \"member-10\",\n    value: \"matteo-sosa\",\n    label: \"Matteo Sosa\",\n    avatar:\n      \"https://images.unsplash.com/photo-1506795660185-2f0c6a1c7f6c?w=96&h=96&dpr=2&q=80\",\n    initials: \"MS\",\n  },\n  {\n    type: \"member\",\n    id: \"member-11\",\n    value: \"salma-rahman\",\n    label: \"Salma Rahman\",\n    avatar:\n      \"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=96&h=96&dpr=2&q=80\",\n    initials: \"SR\",\n  },\n  {\n    type: \"member\",\n    id: \"member-12\",\n    value: \"jonas-meyer\",\n    label: \"Jonas Meyer\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80\",\n    initials: \"JM\",\n  },\n]\n\nconst leadOptions: LeadOption[] = [noLeadOption, ...teamMembers]\n\nfunction UserGlyph({ className }: { className?: string }) {\n  return (\n    <IconPlaceholder\n      lucide=\"UserIcon\"\n      tabler=\"IconUser\"\n      hugeicons=\"UserIcon\"\n      phosphor=\"UserIcon\"\n      remixicon=\"RiUserLine\"\n      className={cn(\"size-4 shrink-0\", className)}\n    />\n  )\n}\n\nfunction LeadTriggerLabel({ option }: { option: LeadOption }) {\n  if (option.type === \"none\") {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <UserGlyph className=\"text-muted-foreground\" />\n        <span className=\"truncate\">{option.label}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      <Avatar className=\"size-5\">\n        <AvatarImage src={option.avatar} alt={option.label} />\n        <AvatarFallback className=\"text-[9px]\">\n          {option.initials}\n        </AvatarFallback>\n      </Avatar>\n      <span className=\"truncate\">{option.label}</span>\n    </span>\n  )\n}\n\nfunction LeadListRow({ option }: { option: LeadOption }) {\n  if (option.type === \"none\") {\n    return (\n      <span className=\"flex min-w-0 items-center gap-2\">\n        <UserGlyph className=\"text-muted-foreground\" />\n        <span className=\"truncate\">{option.label}</span>\n      </span>\n    )\n  }\n\n  return (\n    <Item size=\"xs\" className=\"p-0\">\n      <ItemMedia>\n        <Avatar className=\"size-5\">\n          <AvatarImage src={option.avatar} alt={option.label} />\n          <AvatarFallback className=\"text-[9px]\">\n            {option.initials}\n          </AvatarFallback>\n        </Avatar>\n      </ItemMedia>\n      <ItemContent>\n        <ItemTitle className=\"gap-1 whitespace-nowrap\">\n          <span>{option.label}</span>\n          {option.isCurrentUser ? (\n            <span className=\"text-muted-foreground font-normal\">(You)</span>\n          ) : null}\n        </ItemTitle>\n      </ItemContent>\n    </Item>\n  )\n}\n\nexport function Pattern() {\n  const [lead, setLead] = React.useState<LeadOption | null>(noLeadOption)\n\n  return (\n    <Field className=\"max-w-xs\">\n      <Combobox\n        items={leadOptions}\n        value={lead}\n        onValueChange={setLead}\n        itemToStringValue={(item: LeadOption) => item.label}\n        autoHighlight\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              className=\"w-full justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue placeholder=\"No lead\">\n            {(selectedLead: LeadOption | null) =>\n              selectedLead ? (\n                <LeadTriggerLabel option={selectedLead} />\n              ) : (\n                <span className=\"text-muted-foreground\">No lead</span>\n              )\n            }\n          </ComboboxValue>\n        </ComboboxTrigger>\n\n        <ComboboxContent className=\"max-w-(--anchor-width) min-w-(--anchor-width)\">\n          <ComboboxInput\n            showTrigger={false}\n            placeholder=\"Select lead\"\n            className=\"mb-1\"\n          />\n          <ComboboxEmpty>No team members found.</ComboboxEmpty>\n          <ComboboxList>\n            <ComboboxItem value={noLeadOption}>\n              <LeadListRow option={noLeadOption} />\n            </ComboboxItem>\n\n            <ComboboxGroup items={teamMembers}>\n              <ComboboxLabel>Team members</ComboboxLabel>\n              <ComboboxCollection>\n                {(member: TeamMember) => (\n                  <ComboboxItem key={member.id} value={member}>\n                    <LeadListRow option={member} />\n                  </ComboboxItem>\n                )}\n              </ComboboxCollection>\n            </ComboboxGroup>\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  )\n}","target":"components/examples/c-combobox-23.tsx"}],"meta":{"order":23}}