avatar-group

1import { cva, type VariantProps } from "class-variance-authority";
2import { Slot as SlotPrimitive } from "radix-ui";
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6const avatarGroupVariants = cva("flex items-center", {
7  variants: {
8    orientation: {
9      horizontal: "flex-row",
10      vertical: "flex-col",
11    },
12    dir: {
13      ltr: "",
14      rtl: "",
15    },
16  },
17  compoundVariants: [
18    {
19      orientation: "horizontal",
20      dir: "ltr",
21      className: "-space-x-1",
22    },
23    {
24      orientation: "horizontal",
25      dir: "rtl",
26      className: "flex-row-reverse -space-x-1 space-x-reverse",
27    },
28    {
29      orientation: "vertical",
30      dir: "ltr",
31      className: "-space-y-1",
32    },
33    {
34      orientation: "vertical",
35      dir: "rtl",
36      className: "flex-col-reverse -space-y-1 space-y-reverse",
37    },
38  ],
39  defaultVariants: {
40    orientation: "horizontal",
41    dir: "ltr",
42  },
43});
44 
45interface AvatarGroupProps
46  extends Omit<React.ComponentProps<"div">, "dir">,
47    VariantProps<typeof avatarGroupVariants> {
48  size?: number;
49  max?: number;
50  asChild?: boolean;
51  reverse?: boolean;
52  renderOverflow?: (count: number) => React.ReactNode;
53}
54 
55function AvatarGroup(props: AvatarGroupProps) {
56  const {
57    orientation = "horizontal",
58    dir = "ltr",
59    size = 40,
60    max,
61    asChild,
62    reverse = false,
63    renderOverflow,
64    className,
65    children,
66    ...rootProps
67  } = props;
68 
69  const childrenArray = React.Children.toArray(children).filter(
70    React.isValidElement,
71  );
72  const itemCount = childrenArray.length;
73  const shouldTruncate = max && itemCount > max;
74  const visibleItems = shouldTruncate
75    ? childrenArray.slice(0, max - 1)
76    : childrenArray;
77  const overflowCount = shouldTruncate ? itemCount - (max - 1) : 0;
78  const totalRenderedItems = shouldTruncate ? max : itemCount;
79 
80  const RootPrimitive = asChild ? SlotPrimitive.Slot : "div";
81 
82  return (
83    <RootPrimitive
84      data-orientation={orientation}
85      data-slot="avatar-group"
86      {...rootProps}
87      className={cn(avatarGroupVariants({ orientation, dir }), className)}
88    >
89      {visibleItems.map((child, index) => (
90        <AvatarGroupItem
91          key={index}
92          child={child}
93          index={index}
94          itemCount={totalRenderedItems}
95          orientation={orientation}
96          dir={dir}
97          size={size}
98          reverse={reverse}
99        />
100      ))}
101      {shouldTruncate && (
102        <AvatarGroupItem
103// … truncated