{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "attachment-chip",
  "title": "Attachment chip",
  "description": "a file in a conversation: icon by type, name, size · `onRemove` while composing",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/attachment-chip.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { FileTextIcon, ImageIcon, XIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\nexport type Attachment = { name: string; size: number; type?: string };\n\n/** 1234 → \"1.2 KB\". */\nexport function formatBytes(bytes: number) {\n  if (bytes < 1024) return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB'];\n  let value = bytes / 1024;\n  let unit = 0;\n  while (value >= 1024 && unit < units.length - 1) {\n    value /= 1024;\n    unit++;\n  }\n  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;\n}\n\ntype Props = {\n  file: Attachment;\n  /** Shows a remove button (in the composer, before sending). Omit in a sent message. */\n  onRemove?: () => void;\n  className?: string;\n};\n\n/** A file in a conversation: an icon by type, the name and the size. Removable while composing. */\nexport function AttachmentChip({ file, onRemove, className }: Props) {\n  return (\n    <View className={cn('border-border bg-card max-w-64 flex-row items-center gap-2 rounded-lg border py-1.5 pl-2.5', onRemove ? 'pr-0' : 'pr-2.5', className)}>\n      <Icon as={file.type?.startsWith('image/') ? ImageIcon : FileTextIcon} size={16} className=\"text-muted-foreground shrink-0\" />\n      <Text numberOfLines={1} className=\"min-w-0 flex-shrink text-sm font-medium\">\n        {file.name}\n      </Text>\n      <Text className=\"text-muted-foreground shrink-0 text-xs tabular-nums\">{formatBytes(file.size)}</Text>\n      {onRemove ? (\n        <Pressable onPress={onRemove} hitSlop={8} accessibilityRole=\"button\" accessibilityLabel={`Remove ${file.name}`} className=\"active:bg-accent -my-1.5 size-9 items-center justify-center rounded-md\">\n          <Icon as={XIcon} size={14} className=\"text-muted-foreground\" />\n        </Pressable>\n      ) : null}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/attachment-chip.tsx"
    }
  ],
  "meta": {
    "exports": [
      "AttachmentChip",
      "formatBytes"
    ],
    "api": "<AttachmentChip file={{ name, size, type? }} onRemove? />"
  },
  "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": [
    "ai"
  ],
  "type": "registry:component"
}