4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T10f5,'use client' import { Fragment } from 'react' import { Autocomplete, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteSeparator, } from '@/components/ui/autocomplete' // Grouped items demo type Tag = { id: string; label: string; group: 'Status' | 'Priority' | 'Team' } type TagGroup = { value: string; items: Tag[] } const tagsData: Tag[] = [ // Status { group: 'Status', id: 's-open', label: 'Open' }, { group: 'Status', id: 's-in-progress', label: 'In progress' }, { group: 'Status', id: 's-blocked', label: 'Blocked' }, { group: 'Status', id: 's-resolved', label: 'Resolved' }, { group: 'Status', id: 's-closed', label: 'Closed' }, // Priority { group: 'Priority', id: 'p-low', label: 'Low' }, { group: 'Priority', id: 'p-medium', label: 'Medium' }, { group: 'Priority', id: 'p-high', label: 'High' }, { group: 'Priority', id: 'p-urgent', label: 'Urgent' }, // Team { group: 'Team', id: 't-design', label: 'Design' }, { group: 'Team', id: 't-frontend', label: 'Frontend' }, { group: 'Team', id: 't-backend', label: 'Backend' }, { group: 'Team', id: 't-devops', label: 'DevOps' }, { group: 'Team', id: 't-qa', label: 'QA' }, { group: 'Team', id: 't-mobile', label: 'Mobile' }, { group: 'Team', id: 't-data', label: 'Data' }, { group: 'Team', id: 't-security', label: 'Security' }, { group: 'Team', id: 't-platform', label: 'Platform' }, { group: 'Team', id: 't-infra', label: 'Infrastructure' }, { group: 'Team', id: 't-product', label: 'Product' }, { group: 'Team', id: 't-marketing', label: 'Marketing' }, { group: 'Team', id: 't-sales', label: 'Sales' }, { group: 'Team', id: 't-support', label: 'Support' }, { group: 'Team', id: 't-research', label: 'Research' }, { group: 'Team', id: 't-content', label: 'Content' }, { group: 'Team', id: 't-analytics', label: 'Analytics' }, { group: 'Team', id: 't-operations', label: 'Operations' }, { group: 'Team', id: 't-finance', label: 'Finance' }, { group: 'Team', id: 't-hr', label: 'HR' }, { group: 'Team', id: 't-legal', label: 'Legal' }, { group: 'Team', id: 't-growth', label: 'Growth' }, { group: 'Team', id: 't-partner', label: 'Partner' }, { group: 'Team', id: 't-community', label: 'Community' }, { group: 'Team', id: 't-docs', label: 'Docs' }, { group: 'Team', id: 't-l10n', label: 'Localization' }, { group: 'Team', id: 't-a11y', label: 'Accessibility' }, { group: 'Team', id: 't-sre', label: 'SRE' }, { group: 'Team', id: 't-release', label: 'Release' }, { group: 'Team', id: 't-architecture', label: 'Architecture' }, { group: 'Team', id: 't-ux', label: 'UX' }, { group: 'Team', id: 't-ui', label: 'UI' }, { group: 'Team', id: 't-management', label: 'Management' }, ] function groupTags(tags: Tag[]): TagGroup[] { const groups: Record = {} for (const tag of tags) { if (!groups[tag.group]) { groups[tag.group] = [] } groups[tag.group]?.push(tag) } const order: Array = ['Status', 'Priority', 'Team'] return order.map((value) => ({ items: groups[value] ?? [], value })) } const groupedTags: TagGroup[] = groupTags(tagsData) export default function Demo() { return (

No tags found. {(group: TagGroup) => ( {group.value} {(tag: Tag) => ( {tag.label} )} {group.value !== 'Team' && } )} ) } 4c:["$","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,["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/primitives-autocomplete.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/demo/primitives/autocomplete/p-autocomplete-09/index.tsx","content":"$4f","type":"registry:ui","target":"components/spaceui/autocomplete.tsx"}],"className":"h-[70svh] min-h-80"}]]}]