{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "type": "registry:ui",
  "title": "Chip",
  "description": "Compact tag/filter element with selected and removable states.",
  "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"
  ],
  "dependencies": [
    "tailwind-variants",
    "lucide-react-native"
  ],
  "files": [
    {
      "path": "registry/shared/ui/chip.tsx",
      "type": "registry:ui",
      "target": "components/ui/chip.tsx",
      "content": "import { Pressable, type PressableProps } from 'react-native';\nimport { X } from 'lucide-react-native';\nimport { Text } from '@/components/ui/text';\nimport { cn, useIconColor, useThemeColor } from '@/lib/utils';\nimport { tv } from 'tailwind-variants';\n\nconst chip = tv({\n  base: 'h-8 flex-row items-center gap-1.5 self-start rounded-full border px-3',\n  variants: {\n    variant: {\n      filled: 'border-transparent bg-secondary',\n      outlined: 'border-border bg-transparent',\n    },\n  },\n  defaultVariants: { variant: 'filled' },\n});\n\nexport interface ChipProps extends Omit<PressableProps, 'children'> {\n  label: string;\n  variant?: 'filled' | 'outlined';\n  selected?: boolean;\n  /** Show a trailing remove (x) affordance. */\n  onRemove?: () => void;\n  className?: string;\n}\n\nexport function Chip({\n  label,\n  variant = 'filled',\n  selected = false,\n  onRemove,\n  className,\n  disabled,\n  style,\n  ...props\n}: ChipProps) {\n  const iconColor = useIconColor();\n  const colors = useThemeColor();\n\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ selected, disabled: !!disabled }}\n      disabled={disabled}\n      className={cn(chip({ variant }), disabled && 'opacity-50', className)}\n      style={(state) => [\n        { borderCurve: 'continuous' },\n        selected &&\n          variant === 'filled' && {\n            backgroundColor: colors.primary,\n            borderColor: colors.primary,\n          },\n        selected && variant === 'outlined' && { borderColor: colors.primary },\n        typeof style === 'function' ? style(state) : style,\n      ]}\n      {...props}\n    >\n      <Text\n        className=\"text-sm text-foreground\"\n        style={\n          selected && variant === 'filled'\n            ? { color: colors.primaryForeground }\n            : undefined\n        }\n      >\n        {label}\n      </Text>\n      {onRemove && (\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={`Remove ${label}`}\n          onPress={onRemove}\n          hitSlop={6}\n        >\n          <X\n            size={14}\n            color={\n              selected && variant === 'filled'\n                ? colors.primaryForeground\n                : iconColor\n            }\n          />\n        </Pressable>\n      )}\n    </Pressable>\n  );\n}\n"
    }
  ]
}