4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1430,"use client"; import { ChevronsUpDownIcon, FunnelIcon, SearchIcon, XIcon, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/registry/default/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/default/ui/avatar"; import { Badge } from "@/registry/default/ui/badge"; import { Button, buttonVariants } from "@/registry/default/ui/button"; import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxTrigger, } from "@/registry/default/ui/combobox"; import { Group, GroupSeparator, GroupText } from "@/registry/default/ui/group"; type FilterOption = { id: string; label: string; avatar?: string; }; const members: FilterOption[] = [ { avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=faces", id: "alex-chen", label: "Alex Chen", }, { avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces", id: "sarah-johnson", label: "Sarah Johnson", }, { avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop&crop=faces", id: "marcus-williams", label: "Marcus Williams", }, { avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=faces", id: "emma-davis", label: "Emma Davis", }, { avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=faces", id: "james-miller", label: "James Miller", }, ]; function getInitials(name: string): string { const parts = name.trim().split(/\s+/); if (parts.length === 1) { return parts[0]?.charAt(0).toUpperCase() ?? ""; } const first = parts[0]?.charAt(0) ?? ""; const last = parts[parts.length - 1]?.charAt(0) ?? ""; return (first + last).toUpperCase(); } function MemberAvatar({ name, avatarUrl, className, }: { name: string; avatarUrl?: string; className?: string; }) { return ( {avatarUrl ? : null} {getInitials(name)} ); } export default function Particle() { const [selectedMembers, setSelectedMembers] = useState( members.slice(0, 2), ); const renderTriggerContent = () => { if (selectedMembers.length === 0) return "Select"; const firstMember = selectedMembers[0]; const remainingCount = selectedMembers.length - 1; return (

{firstMember?.label} {remainingCount > 0 && ( +{remainingCount} )}

); }; return ( Member { if (Array.isArray(value)) { setSelectedMembers(value); } }} value={selectedMembers} > } > {renderTriggerContent()} {selectedMembers.length === 0 && ( )}

} />

No members found. {(option: FilterOption) => (

{option.label}

)} ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@coss","registryDependencies":["@coss/avatar","@coss/badge","@coss/button","@coss/combobox","@coss/group"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/particles/p-group-23.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]