{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-pill",
  "type": "registry:ui",
  "title": "Context pill",
  "description": "Rounded pill for showing attached context, such as files or pages in an AI prompt, with a truncated label and an optional remove button.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/context-pill.tsx",
      "type": "registry:ui",
      "target": "components/ui/context-pill.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction ContextPill({\n  children,\n  className,\n  onRemove,\n}: {\n  children: React.ReactNode\n  className?: string\n  onRemove?: () => void\n}) {\n  return (\n    <span\n      data-slot=\"context-pill\"\n      className={cn(\n        \"inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border border-border bg-surface px-2.5 text-xs text-fg shadow-highlight\",\n        className\n      )}\n    >\n      <span className=\"truncate\">{children}</span>\n      {onRemove ? (\n        <button\n          type=\"button\"\n          aria-label=\"Remove\"\n          className=\"rounded-full p-0.5 text-fg-muted outline-none hover:bg-sunken hover:text-fg focus-visible:ring-2 focus-visible:ring-accent\"\n          onClick={onRemove}\n        >\n          <XIcon className=\"size-3\" />\n        </button>\n      ) : null}\n    </span>\n  )\n}\nexport { ContextPill }\n"
    }
  ]
}