{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:ui",
  "title": "Autocomplete",
  "description": "Input with filtered dropdown suggestions.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/input.json"
  ],
  "files": [
    {
      "path": "registry/shared/ui/autocomplete.tsx",
      "type": "registry:ui",
      "target": "components/ui/autocomplete.tsx",
      "content": "import { useState } from 'react';\nimport { Pressable, ScrollView, View, type ViewProps } from 'react-native';\nimport { Input, type InputProps } from '@/components/ui/input';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\n\nexport interface AutocompleteProps extends ViewProps {\n  options: string[];\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (value: string) => void;\n  placeholder?: string;\n  /** Custom filter — defaults to case-insensitive substring. */\n  filter?: (option: string, query: string) => boolean;\n  emptyText?: string;\n  inputProps?: Partial<\n    Omit<InputProps, 'value' | 'onChangeText' | 'placeholder'>\n  >;\n  className?: string;\n}\n\nexport function Autocomplete({\n  options,\n  value = '',\n  onChange,\n  onSelect,\n  placeholder,\n  filter = (o, q) => o.toLowerCase().includes(q.toLowerCase()),\n  emptyText = 'No results',\n  inputProps,\n  className,\n  ...props\n}: AutocompleteProps) {\n  const [focused, setFocused] = useState(false);\n  const results = value ? options.filter((o) => filter(o, value)) : [];\n\n  return (\n    <View className={cn('w-full', className)} {...props}>\n      <Input\n        value={value}\n        onChangeText={onChange}\n        placeholder={placeholder}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n        {...inputProps}\n      />\n      {focused && value.length > 0 && (\n        <View className=\"mt-1 rounded-md border border-border bg-popover\">\n          <ScrollView className=\"max-h-48\" keyboardShouldPersistTaps=\"handled\">\n            {results.length === 0 ? (\n              <Text className=\"px-3 py-2.5 text-sm text-muted-foreground\">\n                {emptyText}\n              </Text>\n            ) : (\n              results.map((opt) => (\n                <Pressable\n                  key={opt}\n                  accessibilityRole=\"button\"\n                  onPress={() => {\n                    onSelect?.(opt);\n                    onChange?.(opt);\n                    setFocused(false);\n                  }}\n                  className=\"px-3 py-2.5 active:bg-accent\"\n                >\n                  <Text className=\"text-sm text-popover-foreground\">{opt}</Text>\n                </Pressable>\n              ))\n            )}\n          </ScrollView>\n        </View>\n      )}\n    </View>\n  );\n}\n"
    }
  ]
}