{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "filter-chip",
  "title": "Filter chip",
  "description": "neutral-active chips",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-haptics",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/filter-chip.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { haptic } from '@/lib/haptics';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon } from 'lucide-react-native';\nimport { Pressable, ScrollView, View } from 'react-native';\n\ntype ChipProps = {\n  label: string;\n  selected?: boolean;\n  onPress?: () => void;\n  icon?: LucideIcon;\n  disabled?: boolean;\n  className?: string;\n};\n\n/** Neutral-active filter chip. Selected = inverted (foreground on background), never the brand colour. */\nexport function FilterChip({ label, selected, onPress, icon, disabled, className }: ChipProps) {\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ selected: !!selected, disabled: !!disabled }}\n      // aria-pressed is web-only (react-native-web drops accessibilityState, and a button may not carry aria-selected).\n      aria-pressed={!!selected}\n      disabled={disabled}\n      onPress={() => {\n        haptic('selection');\n        onPress?.();\n      }}\n      className={cn(\n        'h-9 flex-row items-center gap-1.5 rounded-control border px-3.5',\n        selected ? 'bg-foreground border-foreground' : 'bg-background border-border active:bg-accent',\n        disabled && 'opacity-50',\n        className\n      )}>\n      {icon ? <Icon as={icon} size={14} className={selected ? 'text-background' : 'text-foreground'} /> : null}\n      <Text className={cn('text-sm font-medium', selected ? 'text-background' : 'text-foreground')}>{label}</Text>\n    </Pressable>\n  );\n}\n\ntype RowProps = { children: React.ReactNode; className?: string };\n\n/** Horizontal, scrollable row of FilterChips. */\nexport function FilterChipRow({ children, className }: RowProps) {\n  return (\n    <ScrollView horizontal showsHorizontalScrollIndicator={false} className={cn('flex-grow-0 self-stretch', className)} contentContainerClassName=\"gap-2 px-5\">\n      <View className=\"flex-row gap-2\">{children}</View>\n    </ScrollView>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/filter-chip.tsx"
    }
  ],
  "meta": {
    "exports": [
      "FilterChip",
      "FilterChipRow"
    ],
    "api": "<FilterChipRow><FilterChip label selected onPress icon? /></FilterChipRow>"
  },
  "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"
}