"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import { jsxs, jsx } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
__name(cn, "cn");
var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
  AvatarPrimitive.Root,
  {
    className: cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    ),
    ref,
    ...props
  }
), "Avatar");
Avatar.displayName = AvatarPrimitive.Root.displayName;
var AvatarImage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
  AvatarPrimitive.Image,
  {
    className: cn("aspect-square h-full w-full", className),
    ref,
    ...props
  }
), "AvatarImage");
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
var AvatarFallback = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
  AvatarPrimitive.Fallback,
  {
    className: cn(
      "bg-muted flex h-full w-full items-center justify-center rounded-full",
      className
    ),
    ref,
    ...props
  }
), "AvatarFallback");
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
var AvatarGroup = React.forwardRef(
  ({ className, items, max = 5, ...props }, ref) => {
    const displayItems = items.slice(0, max);
    const remaining = items.length - max;
    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex -space-x-4", className), ...props, children: [
      displayItems.map((item, index) => /* @__PURE__ */ jsxs(Avatar, { className: "border-2 border-background", children: [
        /* @__PURE__ */ jsx(AvatarImage, { src: item.src, alt: item.alt }),
        /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
      ] }, index)),
      remaining > 0 && /* @__PURE__ */ jsx(Avatar, { className: "border-2 border-background", children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
        "+",
        remaining
      ] }) })
    ] });
  }
);
AvatarGroup.displayName = "AvatarGroup";

export { AvatarGroup };
