{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-chip",
  "title": "User Chip",
  "description": "Avatar with a two-line identity block. Bare, glass, outline and compact variants, with a reversed order for right-aligned headers.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json",
    "avatar"
  ],
  "files": [
    {
      "path": "src/components/ui/user-chip.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\nconst chip = cva(\"inline-flex items-center lq-ease transition-colors duration-300\", {\n  variants: {\n    variant: {\n      /** Avatar beside a two-line identity block. The dashboard header. */\n      bare: \"gap-2.5\",\n      /** Wrapped in a frosted capsule. */\n      glass: \"lq-glass gap-2.5 rounded-full py-1.5 pr-4 pl-1.5\",\n      /** Hairline capsule. */\n      outline: \"gap-2.5 rounded-full border border-current/15 py-1.5 pr-4 pl-1.5\",\n      /** Avatar only — for dense toolbars. */\n      compact: \"gap-0\",\n    },\n    size: {\n      sm: \"text-[12px]\",\n      md: \"text-[13px]\",\n      lg: \"text-[15px]\",\n    },\n  },\n  defaultVariants: { variant: \"bare\", size: \"md\" },\n})\n\nconst AVATAR_SIZE = { sm: \"size-8\", md: \"size-10\", lg: \"size-12\" } as const\n\nexport interface UserChipProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof chip> {\n  name: string\n  /** Role, team, or status — set quieter beneath the name. */\n  meta?: React.ReactNode\n  src?: string\n  /** Falls back to initials derived from `name`. */\n  initials?: string\n  /** Puts the identity block ahead of the avatar, for right-aligned headers. */\n  reverse?: boolean\n}\n\nexport function UserChip({\n  name,\n  meta,\n  src,\n  initials,\n  reverse = false,\n  variant,\n  size = \"md\",\n  className,\n  ...props\n}: UserChipProps) {\n  const fallback =\n    initials ??\n    name\n      .split(/\\s+/)\n      .slice(0, 2)\n      .map((w) => w[0])\n      .join(\"\")\n      .toUpperCase()\n\n  const identity =\n    variant === \"compact\" ? null : (\n      <span className={cn(\"grid leading-tight\", reverse && \"text-right\")}>\n        <span className=\"font-medium\">{name}</span>\n        {meta ? <span className=\"text-[0.85em] opacity-50\">{meta}</span> : null}\n      </span>\n    )\n\n  const avatar = (\n    <Avatar className={cn(AVATAR_SIZE[size ?? \"md\"], \"border border-current/10\")}>\n      {src ? <AvatarImage src={src} alt=\"\" /> : null}\n      <AvatarFallback className=\"bg-current/8 font-sans text-[0.85em] font-medium\">\n        {fallback}\n      </AvatarFallback>\n    </Avatar>\n  )\n\n  return (\n    <div\n      data-slot=\"user-chip\"\n      className={cn(chip({ variant, size }), reverse && \"flex-row-reverse\", className)}\n      {...props}\n    >\n      {avatar}\n      {identity}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}