Avatar

1"use client";
2 
3import * as React from "react";
4import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
5 
6import { cn } from "@/lib/utils";
7 
8function getChildElement(children: React.ReactNode, componentName: string) {
9  const child = React.Children.toArray(children).find(React.isValidElement);
10  if (child === undefined) {
11    throw new Error(`${componentName} with asChild requires a valid React element child.`);
12  }
13  return child;
14}
15 
16function Avatar({
17  asChild = false,
18  className,
19  children,
20  render,
21  size = "default",
22  ...props
23}: AvatarPrimitive.Root.Props & {
24  asChild?: boolean;
25  children?: React.ReactNode;
26  size?: "default" | "sm" | "lg";
27}) {
28  return (
29    <AvatarPrimitive.Root
30      data-slot="avatar"
31      data-size={size}
32      className={cn(
33        "group/avatar relative flex size-10 shrink-0 overflow-hidden rounded-full outline-2 outline-border select-none data-[size=lg]:size-12 data-[size=sm]:size-8",
34        className,
35      )}
36      render={asChild ? getChildElement(children, "Avatar") : render}
37      {...props}
38    >
39      {asChild ? undefined : children}
40    </AvatarPrimitive.Root>
41  );
42}
43 
44function AvatarImage({
45  asChild = false,
46  children,
47  className,
48  render,
49  ...props
50}: AvatarPrimitive.Image.Props & { asChild?: boolean; children?: React.ReactNode }) {
51  return (
52    <AvatarPrimitive.Image
53      data-slot="avatar-image"
54      className={cn("aspect-square size-full rounded-full object-cover", className)}
55      render={asChild ? getChildElement(children, "AvatarImage") : render}
56      {...props}
57    />
58  );
59}
60 
61function AvatarFallback({
62  asChild = false,
63  children,
64  className,
65  delay,
66  delayMs,
67  render,
68  ...props
69}: AvatarPrimitive.Fallback.Props & {
70  asChild?: boolean;
71  children?: React.ReactNode;
72  delayMs?: number;
73}) {
74  return (
75    <AvatarPrimitive.Fallback
76      data-slot="avatar-fallback"
77      className={cn(
78        "flex size-full items-center justify-center rounded-full bg-secondary-background text-sm font-base text-foreground group-data-[size=sm]/avatar:text-xs",
79        className,
80      )}
81      delay={delay ?? delayMs}
82      render={asChild ? getChildElement(children, "AvatarFallback") : render}
83      {...props}
84    >
85      {asChild ? undefined : children}
86    </AvatarPrimitive.Fallback>
87  );
88}
89 
90function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
91  return (
92    <span
93      data-slot="avatar-badge"
94      className={cn(
95// … truncated