"use client";
import { cn } from "./index3.js";
import { cva } from "class-variance-authority";
import { Pencil, Plus, Star, User } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { Avatar } from "@base-ui/react/avatar";
//#region src/components/molecules/data/Avatar/Avatar.tsx
var AvatarGroupContext = React.createContext(null);
function useAvatarGroupContext() {
	return React.useContext(AvatarGroupContext);
}
var avatarVariants = cva("relative flex shrink-0", {
	variants: {
		size: {
			xs: "size-6",
			sm: "size-8",
			md: "size-10",
			lg: "size-12",
			xl: "size-14",
			"2xl": "size-16"
		},
		shape: {
			circle: "rounded-full",
			rounded: "rounded-lg"
		}
	},
	defaultVariants: {
		size: "md",
		shape: "circle"
	}
});
var ringColorMap = {
	primary: "ring-2 ring-primary",
	success: "ring-2 ring-success",
	warning: "ring-2 ring-warning",
	destructive: "ring-2 ring-destructive"
};
var softColorMap = {
	primary: {
		bg: "bg-primary/10",
		text: "text-primary"
	},
	indigo: {
		bg: "bg-indigo-500/10",
		text: "text-indigo-500"
	},
	purple: {
		bg: "bg-purple-500/10",
		text: "text-purple-500"
	},
	success: {
		bg: "bg-success/10",
		text: "text-success"
	},
	warning: {
		bg: "bg-warning/10",
		text: "text-warning"
	},
	slate: {
		bg: "bg-slate-400/10",
		text: "text-slate-400"
	}
};
var DEFAULT_FALLBACK_BG = "bg-gray-100 dark:bg-gray-800";
var DEFAULT_FALLBACK_TEXT = "text-gray-600 dark:text-gray-300";
var initialsSizeMap = {
	xs: "text-[10px]",
	sm: "text-xs",
	md: "text-sm",
	lg: "text-base",
	xl: "text-lg",
	"2xl": "text-xl"
};
var placeholderIconSizeMap = {
	xs: "size-3",
	sm: "size-4",
	md: "size-5",
	lg: "size-6",
	xl: "size-7",
	"2xl": "size-8"
};
var statusIndicatorSizeMap = {
	xs: "size-2",
	sm: "size-2.5",
	md: "size-3",
	lg: "size-3.5",
	xl: "size-4",
	"2xl": "size-5"
};
var badgeSizeMap = {
	xs: "size-3.5",
	sm: "size-4",
	md: "size-5",
	lg: "size-6",
	xl: "size-7",
	"2xl": "size-8"
};
var indicatorLabelMap = {
	online: "Online",
	away: "Away",
	busy: "Busy",
	offline: "Offline",
	verified: "Verified",
	upload: "Upload",
	edit: "Edit"
};
var badgeIconSizeMap = {
	xs: "size-2",
	sm: "size-2.5",
	md: "size-3",
	lg: "size-3.5",
	xl: "size-4",
	"2xl": "size-5"
};
var groupSpacingMap = {
	xs: "-space-x-1",
	sm: "-space-x-2",
	md: "-space-x-2.5",
	lg: "-space-x-3",
	xl: "-space-x-3.5",
	"2xl": "-space-x-4"
};
var pillPaddingMap = {
	xs: "px-0.5 py-0.5 gap-1",
	sm: "px-1 py-1 gap-1.5",
	md: "px-1 py-1 gap-2",
	lg: "px-1.5 py-1.5 gap-2",
	xl: "px-2 py-2 gap-2.5",
	"2xl": "px-2.5 py-2.5 gap-3"
};
var pillTextPaddingMap = {
	xs: "px-1",
	sm: "px-1.5",
	md: "px-2",
	lg: "px-2.5",
	xl: "px-3",
	"2xl": "px-3.5"
};
var Avatar$1 = React.forwardRef(function Avatar$2({ src, alt, fallback, icon, size: sizeProp = "md", shape = "circle", type, ring, indicator, indicatorPosition = "top-right", softColor, className }, ref) {
	const size = useAvatarGroupContext()?.size ?? sizeProp;
	const sizeKey = size || "md";
	const resolvedType = type ?? (src ? "image" : icon ? "icon" : fallback || alt ? "initials" : "icon");
	const getInitials = (name) => {
		if (!name) return "";
		const parts = name.split(" ");
		if (parts.length >= 2) return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
		return name.slice(0, 2).toUpperCase();
	};
	const getRingClasses = () => {
		if (!ring) return "";
		if (ring === true) return ringColorMap.primary;
		return ringColorMap[ring];
	};
	const shapeClass = shape === "circle" ? "rounded-full" : "rounded-lg";
	const renderIndicator = () => {
		if (!indicator) return null;
		const indicatorSize = statusIndicatorSizeMap[sizeKey];
		const badgeSize = badgeSizeMap[sizeKey];
		const badgeIconSize = badgeIconSizeMap[sizeKey];
		const dotPosition = indicatorPosition === "top-right" ? "absolute top-0 end-0" : "absolute bottom-0 end-0";
		const badgePosition = indicatorPosition === "top-right" ? "absolute -top-1 -end-1" : "absolute -bottom-0.5 -end-0.5";
		const dotColor = {
			online: "bg-success",
			away: "bg-warning",
			busy: "bg-destructive",
			offline: "bg-muted"
		}[indicator];
		if (dotColor) {
			const isActive = indicator !== "offline";
			return /* @__PURE__ */ jsx("span", {
				role: "status",
				"aria-label": indicatorLabelMap[indicator],
				className: cn(dotPosition, "block rounded-full ring-2 ring-background", dotColor, indicatorSize, isActive && "delight-status-pulse")
			});
		}
		switch (indicator) {
			case "verified": return /* @__PURE__ */ jsx("div", {
				role: "img",
				"aria-label": indicatorLabelMap[indicator],
				className: cn(badgePosition, "flex items-center justify-center rounded-full bg-warning delight-badge-shimmer", badgeSize),
				children: /* @__PURE__ */ jsx(Star, {
					"aria-hidden": "true",
					className: cn("text-white fill-current", badgeIconSize)
				})
			});
			case "upload": return /* @__PURE__ */ jsx("div", {
				role: "img",
				"aria-label": indicatorLabelMap[indicator],
				className: cn(badgePosition, "flex items-center justify-center rounded-full bg-slate-400 ring-2 ring-background", badgeSize),
				children: /* @__PURE__ */ jsx(Plus, {
					"aria-hidden": "true",
					className: cn("text-white", badgeIconSize)
				})
			});
			case "edit": return /* @__PURE__ */ jsx("div", {
				role: "img",
				"aria-label": indicatorLabelMap[indicator],
				className: cn(badgePosition, "flex items-center justify-center rounded-full bg-background border-2 border-border", badgeSize),
				children: /* @__PURE__ */ jsx(Pencil, {
					"aria-hidden": "true",
					className: cn("text-foreground", badgeIconSize)
				})
			});
			default: return null;
		}
	};
	const getFallbackStyles = () => {
		if (softColor) return cn(softColorMap[softColor].bg, softColorMap[softColor].text);
		return cn(DEFAULT_FALLBACK_BG, DEFAULT_FALLBACK_TEXT);
	};
	const getBackgroundClass = () => {
		if (resolvedType === "image" && src) return "";
		if (softColor) return softColorMap[softColor].bg;
		return DEFAULT_FALLBACK_BG;
	};
	return /* @__PURE__ */ jsxs("div", {
		ref,
		"data-slot": "avatar",
		className: cn("relative inline-block", avatarVariants({
			size,
			shape
		}), getBackgroundClass(), getRingClasses(), className),
		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
			"data-slot": "avatar-root",
			"data-size": size,
			className: cn("relative flex size-full shrink-0 select-none overflow-hidden", shapeClass),
			children: [resolvedType === "image" && src && /* @__PURE__ */ jsx(Avatar.Image, {
				"data-slot": "avatar-image",
				src,
				alt: alt ?? "",
				className: cn("aspect-square size-full object-cover delight-fade-in", shapeClass)
			}), /* @__PURE__ */ jsx(Avatar.Fallback, {
				"data-slot": "avatar-fallback",
				className: cn("flex size-full items-center justify-center font-semibold", shapeClass, getFallbackStyles(), initialsSizeMap[sizeKey]),
				children: fallback || alt ? getInitials(fallback || alt) : icon ?? /* @__PURE__ */ jsx(User, { className: cn(softColor ? softColorMap[softColor].text : "text-muted-foreground", placeholderIconSizeMap[sizeKey]) })
			})]
		}), renderIndicator()]
	});
});
Avatar$1.displayName = "Avatar";
function AvatarGroup({ max, size = "md", children, className, variant = "default", pillText, showAddButton, onAddClick, ...props }) {
	const childArray = React.Children.toArray(children);
	const visibleChildren = max ? childArray.slice(0, max) : childArray;
	const remainingCount = max ? Math.max(0, childArray.length - max) : 0;
	const sizeKey = size || "md";
	const contextValue = React.useMemo(() => ({ size }), [size]);
	const renderPillText = () => {
		if (!pillText) return /* @__PURE__ */ jsxs("span", {
			className: cn("text-foreground", initialsSizeMap[sizeKey]),
			children: ["+", remainingCount]
		});
		const parts = pillText.split("{count}");
		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
			parts[0] && /* @__PURE__ */ jsx("span", {
				className: "text-muted-foreground",
				children: parts[0]
			}),
			/* @__PURE__ */ jsxs("span", {
				className: "text-foreground",
				children: ["+", remainingCount]
			}),
			parts[1] && /* @__PURE__ */ jsx("span", {
				className: "text-muted-foreground",
				children: parts[1]
			})
		] });
	};
	const avatarsContent = /* @__PURE__ */ jsxs("div", {
		"data-slot": "avatar-group-stack",
		className: cn("flex items-center", groupSpacingMap[sizeKey]),
		children: [
			visibleChildren.map((child, index) => /* @__PURE__ */ jsx("div", {
				className: "ring-2 ring-background rounded-full delight-stagger",
				style: {
					zIndex: visibleChildren.length - index,
					"--delight-delay": `${index * 50}ms`
				},
				children: child
			}, index)),
			remainingCount > 0 && variant === "default" && /* @__PURE__ */ jsx("div", {
				role: "img",
				"aria-label": `${remainingCount} more`,
				className: cn("flex items-center justify-center rounded-full bg-muted ring-2 ring-background relative", avatarVariants({ size })),
				style: { zIndex: 0 },
				children: /* @__PURE__ */ jsxs("span", {
					"aria-hidden": "true",
					className: cn("text-muted-foreground font-semibold", initialsSizeMap[sizeKey]),
					children: ["+", remainingCount]
				})
			}),
			showAddButton && variant === "default" && /* @__PURE__ */ jsx("button", {
				type: "button",
				onClick: onAddClick,
				"aria-label": "Add avatar",
				className: cn("flex items-center justify-center rounded-full bg-muted ring-2 ring-background hover:bg-muted-foreground/10 transition-colors", avatarVariants({ size })),
				style: { zIndex: 0 },
				children: /* @__PURE__ */ jsx(Plus, { className: cn("text-muted-foreground", placeholderIconSizeMap[sizeKey]) })
			})
		]
	});
	if (variant === "pill") return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsxs("div", {
			className: cn("inline-flex items-center rounded-full bg-background border border-border shadow-sm", pillPaddingMap[sizeKey], className),
			...props,
			children: [avatarsContent, remainingCount > 0 && /* @__PURE__ */ jsx("span", {
				className: cn(pillTextPaddingMap[sizeKey], initialsSizeMap[sizeKey]),
				children: renderPillText()
			})]
		})
	});
	return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx("div", {
			className: cn("flex items-center", className),
			...props,
			children: avatarsContent
		})
	});
}
AvatarGroup.displayName = "AvatarGroup";
//#endregion
export { Avatar$1 as Avatar, AvatarGroup };

//# sourceMappingURL=index15.js.map