@yamada-ui/react/dist/esm/components/avatar/avatar-group.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { styled } from "../../core/system/factory.js";
import { Avatar, AvatarPropsContext, component, useRootComponentProps } from "./avatar.js";
import { useAvatarGroup } from "./use-avatar-group.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/avatar/avatar-group.tsx
/**
* `Avatar` is a component that displays a profile picture or an icon with initials representing a user.
*
* @see https://yamada-ui.com/docs/components/avatar
*/
const AvatarGroupRoot = component((props) => {
	const [, { colorScheme, size, variant, shape,...rest }] = useRootComponentProps(props, "group", { transferProps: [
		"variant",
		"colorScheme",
		"size",
		"shape"
	] });
	const { children, excess, getRootProps } = useAvatarGroup(rest);
	return /* @__PURE__ */ jsx(AvatarPropsContext, {
		value: useMemo(() => ({
			colorScheme,
			size,
			variant,
			shape
		}), [
			variant,
			size,
			colorScheme,
			shape
		]),
		children: /* @__PURE__ */ jsxs(styled.div, {
			...getRootProps(),
			children: [excess > 0 ? /* @__PURE__ */ jsx(Avatar, { fallback: `+${excess}` }) : null, children]
		})
	});
}, "group")();

//#endregion
export { AvatarGroupRoot };
//# sourceMappingURL=avatar-group.js.map