{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-view",
  "title": "User View",
  "description": "Renders a user view that shows the user's avatar alongside their name and email.",
  "dependencies": [
    "@better-auth-ui/react@latest",
    "@better-auth-ui/core@latest",
    "better-auth"
  ],
  "registryDependencies": [
    "skeleton",
    "https://better-auth-ui.com/r/radix-nova/user-avatar.json"
  ],
  "files": [
    {
      "path": "src/components/auth/user/user-view.tsx",
      "content": "\"use client\"\n\nimport {\n  type UsernameAuthClient,\n  useAuth,\n  useSession\n} from \"@better-auth-ui/react\"\nimport type { User } from \"better-auth\"\n\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\nimport { UserAvatar } from \"./user-avatar\"\n\nexport type UserViewProps = {\n  className?: string\n  isPending?: boolean\n  /**\n   * When true, the subtitle line (email when name/username is shown) is hidden.\n   * @default false\n   */\n  hideSubtitle?: boolean\n  /** @remarks `User` */\n  user?: Partial<User> & {\n    username?: string | null\n    displayUsername?: string | null\n  }\n}\n\n/**\n * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional subtitle (email).\n *\n * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details\n * @param className - Additional CSS classes applied to the outer container\n * @param hideSubtitle - When true, omits the muted subtitle row under the primary label\n * @param user - Optional user object to display; when omitted the current session user is used\n * @returns A React element showing the user's avatar with their identifying information\n */\nexport function UserView({\n  className,\n  isPending,\n  hideSubtitle = false,\n  user\n}: UserViewProps) {\n  const { authClient } = useAuth()\n  const { data: session, isPending: sessionPending } = useSession(\n    authClient as UsernameAuthClient,\n    { enabled: !user && !isPending }\n  )\n\n  const resolvedUser = user ?? session?.user\n\n  if ((isPending || sessionPending) && !user) {\n    return (\n      <div className={cn(\"flex items-center gap-2 min-w-0\", className)}>\n        <UserAvatar isPending />\n\n        <div className=\"grid flex-1 gap-1 text-left text-sm\">\n          <Skeleton className=\"h-4 w-24\" />\n\n          {!hideSubtitle && <Skeleton className=\"h-3 w-32\" />}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-2 min-w-0\", className)}>\n      <UserAvatar user={resolvedUser as User | undefined} />\n\n      <div className=\"grid min-w-0 flex-1 text-left text-sm leading-tight\">\n        <span className=\"truncate font-medium text-foreground\">\n          {resolvedUser?.displayUsername ||\n            resolvedUser?.name ||\n            resolvedUser?.email}\n        </span>\n\n        {!hideSubtitle &&\n          (resolvedUser?.displayUsername || resolvedUser?.name) && (\n            <span className=\"text-muted-foreground truncate text-xs\">\n              {resolvedUser?.email}\n            </span>\n          )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/user/user-view.tsx"
    }
  ],
  "type": "registry:component"
}