{
  "$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": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/button"
  ],
  "files": [
    {
      "path": "components/kit/attachment-chip.tsx",
      "content": "import { FileTextIcon, ImageIcon, XIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport { Button } from '@/components/ui/button';\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  const Icon = file.type?.startsWith('image/') ? ImageIcon : FileTextIcon;\n  return (\n    <span className={cn('border-border bg-card flex max-w-64 items-center gap-2 rounded-lg border py-1.5 pr-1.5 pl-2.5 text-sm', className)}>\n      <Icon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden />\n      <span className=\"min-w-0 flex-1 truncate font-medium\">{file.name}</span>\n      <span className=\"text-muted-foreground shrink-0 text-xs tabular-nums\">{formatBytes(file.size)}</span>\n      {onRemove ? (\n        <Button type=\"button\" variant=\"ghost\" size=\"icon\" className=\"size-6 shrink-0\" onClick={onRemove} aria-label={`Remove ${file.name}`}>\n          <XIcon className=\"size-3.5\" />\n        </Button>\n      ) : null}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/attachment-chip.tsx"
    }
  ],
  "meta": {
    "exports": [
      "AttachmentChip",
      "formatBytes"
    ],
    "api": "<AttachmentChip file={{ name, size, type? }} onRemove? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}