avatar-group

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