{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-combobox-8",
  "description": "Combobox with grouped items",
  "registryDependencies": [
    "@coss/combobox"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-combobox-8.tsx",
      "content": "\"use client\";\n\nimport { Fragment } from \"react\";\nimport {\n  Combobox,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxSeparator,\n} from \"@/registry/default/ui/combobox\";\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    <Combobox items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <ComboboxInput aria-label=\"Search tags\" placeholder=\"e.g. feature\" />\n      </div>\n      <ComboboxPopup>\n        <ComboboxEmpty>No tags found.</ComboboxEmpty>\n        <ComboboxList>\n          {(group: TagGroup) => (\n            <Fragment key={group.value}>\n              <ComboboxGroup items={group.items}>\n                <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>\n                <ComboboxCollection>\n                  {(tag: Tag) => (\n                    <ComboboxItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n              {group.value !== \"Team\" && <ComboboxSeparator />}\n            </Fragment>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "combobox",
    "input"
  ],
  "type": "registry:block"
}