{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-account-badge",
  "title": "User Account Badge",
  "author": "MR <contact@bimframe.co>",
  "description": "An avatar-and-name chip for a connected account, with optional provider mark. Server-safe.",
  "registryDependencies": [
    "avatar",
    "@cantera/oauth-types",
    "@cantera/status-tokens"
  ],
  "files": [
    {
      "path": "registry/ui/user-account-badge.tsx",
      "content": "import type * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { accountInitials, type OAuthAccount, type OAuthProvider } from '@/lib/oauth-types'\nimport { cn } from '@/lib/utils'\n\ninterface UserAccountBadgeProps extends React.ComponentProps<'div'> {\n  account: OAuthAccount\n  /** When set, the provider mark is shown next to the account. */\n  provider?: OAuthProvider\n  size?: 'sm' | 'default'\n}\n\n/**\n * An avatar-and-name chip for a connected account. Server-safe: no handlers,\n * plain data in.\n */\nfunction UserAccountBadge({\n  account,\n  provider,\n  size = 'default',\n  className,\n  ...props\n}: UserAccountBadgeProps) {\n  return (\n    <div\n      data-slot=\"user-account-badge\"\n      className={cn('flex min-w-0 items-center gap-2', className)}\n      {...props}\n    >\n      {/* 12px is the text floor, so the compact avatar is 28px, not 24px — two\n          initials at text-xs need the room. */}\n      <Avatar className={size === 'sm' ? 'size-7' : 'size-8'}>\n        {account.avatarUrl && <AvatarImage src={account.avatarUrl} alt=\"\" />}\n        {/* The primitive's fallback ink is muted-foreground on bg-muted, which\n            measures 4.35:1 on a stock shadcn theme. Foreground at 60% reads as\n            the same gray and clears 5:1 wherever the theme's foreground\n            contrasts its own muted surface. */}\n        <AvatarFallback className=\"font-medium text-status-neutral text-xs\">\n          {accountInitials(account)}\n        </AvatarFallback>\n      </Avatar>\n      <div className=\"grid min-w-0 leading-tight\">\n        <span className={cn('truncate font-medium', size === 'sm' ? 'text-xs' : 'text-sm')}>\n          {account.name ?? account.email ?? 'Unknown account'}\n        </span>\n        {account.name && account.email && (\n          <span className=\"truncate text-xs text-muted-foreground\">{account.email}</span>\n        )}\n      </div>\n      {provider?.icon && (\n        <span\n          role=\"img\"\n          aria-label={provider.name}\n          title={provider.name}\n          className=\"ml-auto flex text-muted-foreground [&_svg]:size-3.5 [&_svg]:shrink-0\"\n        >\n          {provider.icon}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { UserAccountBadge, type UserAccountBadgeProps }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "authentication",
    "account"
  ],
  "type": "registry:component"
}