{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-chip",
  "type": "registry:ui",
  "title": "User chip",
  "description": "React user chip showing a small avatar with initials fallback and the person's name, plus an optional remove button. Good for assignees, mentions and pickers.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/avatar.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/user-chip.tsx",
      "type": "registry:ui",
      "target": "components/ui/user-chip.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\n/** A pill with an avatar and a name, optionally removable, for assignee pickers and share lists. */\ntype UserChipProps = {\n  name?: string\n  /** Avatar image; initials are used when absent. */\n  src?: string\n  /** Shows a remove button when provided. */\n  onRemove?: () => void\n  className?: string\n}\n\n/** \"Maya Chen\" → \"MC\"; single words keep their first two letters. */\nfunction initials(name: string) {\n  const parts = name.trim().split(/\\s+/)\n  return (parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : name.slice(0, 2)).toUpperCase()\n}\n\nfunction UserChip({ name = \"Maya Chen\", src, onRemove, className }: UserChipProps) {\n  return (\n    <span\n      data-slot=\"user-chip\"\n      className={cn(\n        \"inline-flex h-7 items-center gap-1.5 rounded-full border border-border bg-sunken pl-0.5 pr-2 text-xs font-medium text-fg\",\n        className\n      )}\n    >\n      <Avatar className=\"size-5\">\n        {src ? <AvatarImage src={src} alt=\"\" /> : null}\n        <AvatarFallback className=\"text-[9px]\">{initials(name)}</AvatarFallback>\n      </Avatar>\n      {name}\n      {onRemove ? (\n        <button\n          type=\"button\"\n          aria-label={`Remove ${name}`}\n          className=\"rounded-full text-fg-muted outline-none 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 { UserChip }\nexport type { UserChipProps }\n"
    }
  ]
}