snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/aria/select-autocomplete.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { Autocomplete, useFilter } from "react-aria-components"
+
+import { Button } from "@/styles/aria-nova/ui/button"
+import {
+  Select,
+  SelectEmpty,
+  SelectGroup,
+  SelectInput,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectTrigger,
+  SelectValue,
+} from "@/styles/aria-nova/ui/select"
+
+const countries = [
+  {
+    code: "ar",
+    value: "argentina",
+    label: "Argentina",
+    continent: "South America",
+  },
+  { code: "au", value: "australia", label: "Australia", continent: "Oceania" },
+  { code: "br", value: "brazil", label: "Brazil", continent: "South America" },
+  { code: "ca", value: "canada", label: "Canada", continent: "North America" },
+  { code: "cn", value: "china", label: "China", continent: "Asia" },
+  {
+    code: "co",
+    value: "colombia",
+    label: "Colombia",
+    continent: "South America",
+  },
+  { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
+  { code: "fr", value: "france", label: "France", continent: "Europe" },
+  { code: "de", value: "germany", label: "Germany", continent: "Europe" },
+  { code: "it", value: "italy", label: "Italy", continent: "Europe" },
+  { code: "jp", value: "japan", label: "Japan", continent: "Asia" },
+  { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
+  { code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
+  {
+    code: "nz",
+    value: "new-zealand",
+    label: "New Zealand",
+    continent: "Oceania",
+  },
+  { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
+  {
+    code: "za",
+    value: "south-africa",
+    label: "South Africa",
+    continent: "Africa",
+  },
+  { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
+  {
+    code: "gb",
+    value: "united-kingdom",
+    label: "United Kingdom",
+    continent: "Europe",
+  },
+  {
+    code: "us",
+    value: "united-states",
+    label: "United States",
+    continent: "North America",
+  },
+]
+
+export function SelectAutocomplete() {
+  const { contains } = useFilter({ sensitivity: "base" })
+  return (
+    <Select placeholder="Select country" className="w-full max-w-48">
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <Autocomplete filter={contains}>
+        <SelectPopover>
+          <SelectInput />
+          <SelectList
+            renderEmptyState={() => <SelectEmpty>No items found.</SelectEmpty>}
+          >
+            <SelectGroup items={countries}>
+              {(item) => <SelectItem id={item.value}>{item.label}</SelectItem>}
+            </SelectGroup>
+          </SelectList>
+        </SelectPopover>
+      </Autocomplete>
+    </Select>
+  )
+}