{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-field",
  "title": "Search field",
  "description": "Input + search icon + clear",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/input",
    "@kit-native/lib-utils"
  ],
  "files": [
    {
      "path": "components/kit/search-field.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Input } from '@/components/ui/input';\nimport { cn } from '@/lib/utils';\nimport { SearchIcon, XIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\ntype Props = React.ComponentProps<typeof Input> & {\n  value: string;\n  onChangeText: (text: string) => void;\n  containerClassName?: string;\n};\n\n/** Input with a leading search icon and a clear button. */\nexport function SearchField({ value, onChangeText, className, containerClassName, ...props }: Props) {\n  return (\n    <View className={cn('relative justify-center', containerClassName)}>\n      {/* Drawn over the input, so it must let taps through or the icon is a dead spot. */}\n      <View className=\"pointer-events-none absolute left-3 z-10\">\n        <Icon as={SearchIcon} className=\"text-muted-foreground\" size={16} />\n      </View>\n      <Input\n        className={cn('pl-9 pr-9', className)}\n        value={value}\n        onChangeText={onChangeText}\n        autoCorrect={false}\n        autoCapitalize=\"none\"\n        returnKeyType=\"search\"\n        {...props}\n      />\n      {value ? (\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel=\"Clear search\"\n          onPress={() => onChangeText('')}\n          hitSlop={8}\n          className=\"absolute right-3 z-10\">\n          <Icon as={XIcon} className=\"text-muted-foreground\" size={16} />\n        </Pressable>\n      ) : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/search-field.tsx"
    }
  ],
  "meta": {
    "exports": [
      "SearchField"
    ],
    "api": "<SearchField value onChangeText placeholder />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}