{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-autocomplete-10",
  "description": "Autocomplete with grouped items",
  "registryDependencies": [
    "@coss/autocomplete"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-autocomplete-10.tsx",
      "content": "\"use client\";\n\nimport { Fragment } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" };\ntype TagGroup = { value: string; items: Tag[] };\n\nconst tagsData: Tag[] = [\n  // Status\n  { group: \"Status\", id: \"s-open\", label: \"Open\" },\n  { group: \"Status\", id: \"s-in-progress\", label: \"In progress\" },\n  { group: \"Status\", id: \"s-blocked\", label: \"Blocked\" },\n  { group: \"Status\", id: \"s-resolved\", label: \"Resolved\" },\n  { group: \"Status\", id: \"s-closed\", label: \"Closed\" },\n  // Priority\n  { group: \"Priority\", id: \"p-low\", label: \"Low\" },\n  { group: \"Priority\", id: \"p-medium\", label: \"Medium\" },\n  { group: \"Priority\", id: \"p-high\", label: \"High\" },\n  { group: \"Priority\", id: \"p-urgent\", label: \"Urgent\" },\n  // Team\n  { group: \"Team\", id: \"t-design\", label: \"Design\" },\n  { group: \"Team\", id: \"t-frontend\", label: \"Frontend\" },\n  { group: \"Team\", id: \"t-backend\", label: \"Backend\" },\n  { group: \"Team\", id: \"t-devops\", label: \"DevOps\" },\n  { group: \"Team\", id: \"t-qa\", label: \"QA\" },\n  { group: \"Team\", id: \"t-mobile\", label: \"Mobile\" },\n  { group: \"Team\", id: \"t-data\", label: \"Data\" },\n  { group: \"Team\", id: \"t-security\", label: \"Security\" },\n  { group: \"Team\", id: \"t-platform\", label: \"Platform\" },\n  { group: \"Team\", id: \"t-infra\", label: \"Infrastructure\" },\n  { group: \"Team\", id: \"t-product\", label: \"Product\" },\n  { group: \"Team\", id: \"t-marketing\", label: \"Marketing\" },\n  { group: \"Team\", id: \"t-sales\", label: \"Sales\" },\n  { group: \"Team\", id: \"t-support\", label: \"Support\" },\n  { group: \"Team\", id: \"t-research\", label: \"Research\" },\n  { group: \"Team\", id: \"t-content\", label: \"Content\" },\n  { group: \"Team\", id: \"t-analytics\", label: \"Analytics\" },\n  { group: \"Team\", id: \"t-operations\", label: \"Operations\" },\n  { group: \"Team\", id: \"t-finance\", label: \"Finance\" },\n  { group: \"Team\", id: \"t-hr\", label: \"HR\" },\n  { group: \"Team\", id: \"t-legal\", label: \"Legal\" },\n  { group: \"Team\", id: \"t-growth\", label: \"Growth\" },\n  { group: \"Team\", id: \"t-partner\", label: \"Partner\" },\n  { group: \"Team\", id: \"t-community\", label: \"Community\" },\n  { group: \"Team\", id: \"t-docs\", label: \"Docs\" },\n  { group: \"Team\", id: \"t-l10n\", label: \"Localization\" },\n  { group: \"Team\", id: \"t-a11y\", label: \"Accessibility\" },\n  { group: \"Team\", id: \"t-sre\", label: \"SRE\" },\n  { group: \"Team\", id: \"t-release\", label: \"Release\" },\n  { group: \"Team\", id: \"t-architecture\", label: \"Architecture\" },\n  { group: \"Team\", id: \"t-ux\", label: \"UX\" },\n  { group: \"Team\", id: \"t-ui\", label: \"UI\" },\n  { group: \"Team\", id: \"t-management\", label: \"Management\" },\n];\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {};\n  for (const tag of tags) {\n    if (!groups[tag.group]) {\n      groups[tag.group] = [];\n    }\n    groups[tag.group]?.push(tag);\n  }\n\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"];\n  return order.map((value) => ({ items: groups[value] ?? [], value }));\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData);\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <AutocompleteInput\n          aria-label=\"Search tags\"\n          placeholder=\"e.g. feature\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(group: TagGroup) => (\n            <Fragment key={group.value}>\n              <AutocompleteGroup items={group.items}>\n                <AutocompleteGroupLabel>{group.value}</AutocompleteGroupLabel>\n                <AutocompleteCollection>\n                  {(tag: Tag) => (\n                    <AutocompleteItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </AutocompleteItem>\n                  )}\n                </AutocompleteCollection>\n              </AutocompleteGroup>\n              {group.value !== \"Team\" && <AutocompleteSeparator />}\n            </Fragment>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "autocomplete",
    "input"
  ],
  "type": "registry:block"
}