{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "select-searchable-example",
  "title": "Select Searchable",
  "description": "select-searchable-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/dialog",
    "https://intentui.com/r/field",
    "https://intentui.com/r/list-box",
    "https://intentui.com/r/search-field",
    "https://intentui.com/r/select"
  ],
  "files": [
    {
      "path": "src/components/examples/pickers/select/select-searchable-example.tsx",
      "content": "'use client'\nimport { Autocomplete, useFilter } from 'react-aria-components/Autocomplete'\nimport { Popover } from 'react-aria-components/Popover'\nimport { Dialog } from '@/components/ui/dialog'\nimport { Label } from '@/components/ui/field'\nimport { ListBox } from '@/components/ui/list-box'\nimport { SearchField, SearchInput } from '@/components/ui/search-field'\nimport { Select, SelectItem, SelectTrigger } from '@/components/ui/select'\n\nconst languages = [\n  { id: 'en', name: 'English' },\n  { id: 'es', name: 'Spanish' },\n  { id: 'fr', name: 'French' },\n  { id: 'de', name: 'German' },\n  { id: 'it', name: 'Italian' },\n  { id: 'pt', name: 'Portuguese' },\n  { id: 'ru', name: 'Russian' },\n  { id: 'ja', name: 'Japanese' },\n  { id: 'zh', name: 'Chinese' },\n  { id: 'ar', name: 'Arabic' },\n  { id: 'hi', name: 'Hindi' },\n  { id: 'ko', name: 'Korean' },\n  { id: 'sv', name: 'Swedish' },\n  { id: 'nl', name: 'Dutch' },\n  { id: 'tr', name: 'Turkish' },\n  { id: 'pl', name: 'Polish' },\n  { id: 'cs', name: 'Czech' },\n  { id: 'el', name: 'Greek' },\n  { id: 'he', name: 'Hebrew' },\n]\n\nexport default function SelectSearchableDemo() {\n  const { contains } = useFilter({ sensitivity: 'base' })\n  return (\n    <Select>\n      <Label>Select a language</Label>\n      <SelectTrigger />\n      <Popover className=\"entering:fade-in exiting:fade-out flex max-h-80 w-(--trigger-width) entering:animate-in exiting:animate-out flex-col overflow-hidden rounded-lg border bg-overlay\">\n        <Dialog aria-label=\"Language\">\n          <Autocomplete filter={contains}>\n            <div className=\"border-b py-0.5\">\n              <SearchField className=\"rounded-lg focus-within:ring-0\" autoFocus>\n                <SearchInput\n                  className=\"border-none ring-0 focus:ring-0\"\n                  placeholder=\"Search&hellip;\"\n                />\n              </SearchField>\n            </div>\n            <ListBox\n              className=\"max-h-[inherit] min-w-[inherit] rounded-t-none border-0 bg-transparent shadow-none\"\n              items={languages}\n            >\n              {(item) => <SelectItem>{item.name}</SelectItem>}\n            </ListBox>\n          </Autocomplete>\n        </Dialog>\n      </Popover>\n    </Select>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/select-searchable-example/page.tsx"
    }
  ],
  "type": "registry:page"
}