{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "baseui-particles-autocomplete-with-groups",
	"description": "Autocomplete with groups",
	"dependencies": ["lucide-react"],
	"registryDependencies": ["@craftdotui/baseui-autocomplete"],
	"files": [
		{
			"path": "packages/baseui/particles/autocomplete/autocomplete-with-groups/index.tsx",
			"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n\tAutocomplete,\n\tAutocompleteCollection,\n\tAutocompleteEmpty,\n\tAutocompleteGroup,\n\tAutocompleteGroupLabel,\n\tAutocompleteInput,\n\tAutocompleteItem,\n\tAutocompleteList,\n\tAutocompletePopup,\n\tAutocompleteSeparator,\n} from \"@/components/baseui/components/autocomplete\";\n\ninterface Framework {\n\tid: string;\n\tvalue: string;\n\tcategory: string;\n}\n\ntype FrameworkGroup = { value: string; items: Framework[] };\n\nconst frameworksData: Framework[] = [\n\t// JavaScript/TypeScript\n\t{ id: \"js-react\", value: \"React\", category: \"JavaScript\" },\n\t{ id: \"js-next\", value: \"Next.js\", category: \"JavaScript\" },\n\t{ id: \"js-vue\", value: \"Vue.js\", category: \"JavaScript\" },\n\t{ id: \"js-svelte\", value: \"Svelte\", category: \"JavaScript\" },\n\t{ id: \"js-angular\", value: \"Angular\", category: \"JavaScript\" },\n\t{ id: \"js-astro\", value: \"Astro\", category: \"JavaScript\" },\n\t{ id: \"js-solid\", value: \"Solid.js\", category: \"JavaScript\" },\n\t{ id: \"js-qwik\", value: \"Qwik\", category: \"JavaScript\" },\n\n\t// Python\n\t{ id: \"py-django\", value: \"Django\", category: \"Python\" },\n\t{ id: \"py-fastapi\", value: \"FastAPI\", category: \"Python\" },\n\t{ id: \"py-flask\", value: \"Flask\", category: \"Python\" },\n\t{ id: \"py-streamlit\", value: \"Streamlit\", category: \"Python\" },\n\n\t// Go\n\t{ id: \"go-gin\", value: \"Gin\", category: \"Go\" },\n\t{ id: \"go-echo\", value: \"Echo\", category: \"Go\" },\n\t{ id: \"go-fiber\", value: \"Fiber\", category: \"Go\" },\n\n\t// Rust\n\t{ id: \"rs-actix\", value: \"Actix Web\", category: \"Rust\" },\n\t{ id: \"rs-axum\", value: \"Axum\", category: \"Rust\" },\n\t{ id: \"rs-rocket\", value: \"Rocket\", category: \"Rust\" },\n\t{ id: \"rs-leptos\", value: \"Leptos\", category: \"Rust\" },\n\n\t// Java\n\t{ id: \"java-spring\", value: \"Spring Boot\", category: \"Java\" },\n\t{ id: \"java-quarkus\", value: \"Quarkus\", category: \"Java\" },\n];\n\nfunction groupFrameworks(frameworks: Framework[]): FrameworkGroup[] {\n\tconst groups: Record<string, Framework[]> = {};\n\tfor (const fw of frameworks) {\n\t\tif (!groups[fw.category]) {\n\t\t\tgroups[fw.category] = [];\n\t\t}\n\t\tgroups[fw.category]?.push(fw);\n\t}\n\n\tconst order: Array<FrameworkGroup[\"value\"]> = [\n\t\t\"JavaScript\",\n\t\t\"Python\",\n\t\t\"Go\",\n\t\t\"Rust\",\n\t\t\"Java\",\n\t];\n\treturn order.map((value) => ({ items: groups[value] ?? [], value }));\n}\n\nconst groupedFrameworks: FrameworkGroup[] = groupFrameworks(frameworksData);\n\nexport default function Particle() {\n\treturn (\n\t\t<Autocomplete items={groupedFrameworks}>\n\t\t\t<div className=\"flex flex-col items-start gap-2\">\n\t\t\t\t<AutocompleteInput\n\t\t\t\t\taria-label=\"Search frameworks\"\n\t\t\t\t\tplaceholder=\"e.g. React, Django, Gin...\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<AutocompletePopup>\n\t\t\t\t<AutocompleteEmpty>No frameworks found.</AutocompleteEmpty>\n\t\t\t\t<AutocompleteList>\n\t\t\t\t\t{(group: FrameworkGroup) => (\n\t\t\t\t\t\t<React.Fragment key={group.value}>\n\t\t\t\t\t\t\t<AutocompleteGroup items={group.items}>\n\t\t\t\t\t\t\t\t<AutocompleteGroupLabel>\n\t\t\t\t\t\t\t\t\t{group.value}\n\t\t\t\t\t\t\t\t</AutocompleteGroupLabel>\n\t\t\t\t\t\t\t\t<AutocompleteCollection>\n\t\t\t\t\t\t\t\t\t{(fw: Framework) => (\n\t\t\t\t\t\t\t\t\t\t<AutocompleteItem\n\t\t\t\t\t\t\t\t\t\t\tkey={fw.id}\n\t\t\t\t\t\t\t\t\t\t\tvalue={fw}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{fw.value}\n\t\t\t\t\t\t\t\t\t\t</AutocompleteItem>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</AutocompleteCollection>\n\t\t\t\t\t\t\t</AutocompleteGroup>\n\t\t\t\t\t\t\t{group.value !== \"Java\" && (\n\t\t\t\t\t\t\t\t<AutocompleteSeparator />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t)}\n\t\t\t\t</AutocompleteList>\n\t\t\t</AutocompletePopup>\n\t\t</Autocomplete>\n\t);\n}\n",
			"type": "registry:component",
			"target": "components/baseui/particles/autocomplete-with-groups.tsx"
		}
	],
	"type": "registry:component"
}