{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "baseui-particles-autocomplete-async-search",
	"description": "Autocomplete with async search",
	"dependencies": ["lucide-react"],
	"registryDependencies": ["@craftdotui/baseui-autocomplete"],
	"files": [
		{
			"path": "packages/baseui/particles/autocomplete/autocomplete-async-search/index.tsx",
			"content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport {\n\tAutocomplete,\n\tAutocompleteInput,\n\tAutocompletePopup,\n\tAutocompleteList,\n\tAutocompleteItem,\n\tAutocompleteEmpty,\n\tAutocompleteStatus,\n} from \"@/components/baseui/components/autocomplete\";\n\ninterface User {\n\tid: string;\n\tname: string;\n\temail: string;\n}\n\n// Simulated API call\nconst searchUsers = async (query: string): Promise<User[]> => {\n\tawait new Promise((resolve) => setTimeout(resolve, 1000));\n\tconst users = [\n\t\t{ id: \"1\", name: \"John Doe\", email: \"john@example.com\" },\n\t\t{ id: \"2\", name: \"Jane Smith\", email: \"jane@example.com\" },\n\t\t{ id: \"3\", name: \"Bob Johnson\", email: \"bob@example.com\" },\n\t\t{ id: \"4\", name: \"Alice Williams\", email: \"alice@example.com\" },\n\t];\n\treturn users.filter((user) =>\n\t\tuser.name.toLowerCase().includes(query.toLowerCase()),\n\t);\n};\n\nexport default function Particle() {\n\tconst [value, setValue] = useState(\"\");\n\tconst [query, setQuery] = useState(\"\");\n\tconst [loading, setLoading] = useState(false);\n\tconst [items, setItems] = useState<User[]>([]);\n\n\tconst shouldRenderPopup = query !== \"\";\n\n\tlet status: React.ReactNode = `${items.length} result${items.length === 1 ? \"\" : \"s\"} found`;\n\tif (loading) {\n\t\tstatus = (\n\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t<span\n\t\t\t\t\taria-hidden\n\t\t\t\t\tclassName=\"inline-flex size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n\t\t\t\t/>\n\t\t\t\tSearching...\n\t\t\t</div>\n\t\t);\n\t} else if (query.length === 0 && value) {\n\t\tstatus = `Movie or year \"${value}\" does not exist in the Top 100 IMDb movies`;\n\t}\n\n\tuseEffect(() => {\n\t\tif (query.length > 0) {\n\t\t\tsetLoading(true);\n\t\t\tsearchUsers(query).then((results) => {\n\t\t\t\tsetItems(results);\n\t\t\t\tsetLoading(false);\n\t\t\t});\n\t\t} else {\n\t\t\tsetItems([]);\n\t\t}\n\t}, [query]);\n\n\treturn (\n\t\t<Autocomplete\n\t\t\titems={items}\n\t\t\tvalue={value}\n\t\t\tonValueChange={setValue}\n\t\t\titemToStringValue={(item) => item.name}\n\t\t\tfilter={null}\n\t\t>\n\t\t\t<AutocompleteInput\n\t\t\t\tplaceholder=\"Search users...\"\n\t\t\t\tonChange={(e) => setQuery(e.target.value)}\n\t\t\t/>\n\n\t\t\t{shouldRenderPopup && (\n\t\t\t\t<AutocompletePopup>\n\t\t\t\t\t<AutocompleteStatus>{status}</AutocompleteStatus>\n\t\t\t\t\t<AutocompleteEmpty>No users found.</AutocompleteEmpty>\n\t\t\t\t\t<AutocompleteList>\n\t\t\t\t\t\t{(user: User) => (\n\t\t\t\t\t\t\t<AutocompleteItem key={user.id} value={user}>\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t\t\t{user.name}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{user.email}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AutocompleteItem>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AutocompleteList>\n\t\t\t\t</AutocompletePopup>\n\t\t\t)}\n\t\t</Autocomplete>\n\t);\n}\n",
			"type": "registry:component",
			"target": "components/baseui/particles/autocomplete-async-search.tsx"
		}
	],
	"type": "registry:component"
}