{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-combobox-20",
  "description": "Combobox multiple with stacked divided chips",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/avatar",
    "@coss/badge",
    "@coss/button",
    "@coss/combobox"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-combobox-20.tsx",
      "content": "\"use client\";\n\nimport { SearchIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ntype TeamMember = {\n  avatar: string;\n  initials: string;\n  label: string;\n  priority: \"Lowest\" | \"Low\" | \"Medium\" | \"High\" | \"Highest\";\n  value: string;\n  weight: number;\n};\n\nconst teamMembers: TeamMember[] = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    priority: \"Highest\",\n    value: \"jenny\",\n    weight: 200,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    priority: \"Medium\",\n    value: \"paul\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    priority: \"High\",\n    value: \"luna\",\n    weight: 150,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=72&h=72&dpr=2&q=80\",\n    initials: \"AC\",\n    label: \"Alex Chen\",\n    priority: \"Low\",\n    value: \"alex\",\n    weight: 100,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=72&h=72&dpr=2&q=80\",\n    initials: \"SJ\",\n    label: \"Sarah Johnson\",\n    priority: \"Medium\",\n    value: \"sarah\",\n    weight: 50,\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=72&h=72&dpr=2&q=80\",\n    initials: \"ED\",\n    label: \"Emma Davis\",\n    priority: \"Lowest\",\n    value: \"emma\",\n    weight: 100,\n  },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n  const [selected, setSelected] = useState<TeamMember[]>(\n    teamMembers.slice(0, 2),\n  );\n\n  return (\n    <div className=\"flex w-full flex-col gap-2\">\n      <Combobox\n        autoHighlight\n        items={teamMembers}\n        multiple\n        onOpenChange={setOpen}\n        onValueChange={(value) => {\n          setSelected(value);\n          setOpen(false);\n        }}\n        open={open}\n        value={selected}\n      >\n        <ComboboxInput\n          aria-label=\"Add team members\"\n          placeholder=\"Add team members…\"\n          startAddon={<SearchIcon />}\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No team members found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item: TeamMember) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      {selected.length > 0 && (\n        <ul className=\"divide-y rounded-lg border\">\n          {selected.map((member) => (\n            <li\n              className=\"flex items-center gap-2 p-1 ps-2 text-base sm:text-sm\"\n              key={member.value}\n            >\n              <Avatar className=\"size-5\">\n                <AvatarImage alt={member.label} src={member.avatar} />\n                <AvatarFallback className=\"text-[.625rem]\">\n                  {member.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"truncate font-medium\">{member.label}</span>\n              <Badge className=\"ms-auto\" size=\"sm\" variant=\"outline\">\n                {member.priority}\n              </Badge>\n              <span className=\"text-muted-foreground text-xs tabular-nums\">\n                {member.weight}%\n              </span>\n              <Button\n                aria-label={`Remove ${member.label}`}\n                onClick={() =>\n                  setSelected((current) =>\n                    current.filter((item) => item.value !== member.value),\n                  )\n                }\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
  },
  "categories": [
    "combobox",
    "input"
  ],
  "type": "registry:block"
}