@yamada-ui/react/dist/esm/components/avatar/avatar.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 { createSlotComponent } from "../../core/components/create-component.js";
import { UserRoundIcon } from "../icon/icons/user-round-icon.js";
import { avatarStyle } from "./avatar.style.js";
import { useAvatar } from "./use-avatar.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/avatar/avatar.tsx
const { component, PropsContext: AvatarPropsContext, usePropsContext: useAvatarPropsContext, withContext, withProvider, useRootComponentProps } = createSlotComponent("avatar", avatarStyle);
/**
* `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 Avatar = withProvider(({ fallbackProps, imageProps,...rest }) => {
	const { getFallbackProps, getImageProps, getRootProps } = useAvatar(rest);
	return /* @__PURE__ */ jsxs(styled.div, {
		...getRootProps(),
		children: [/* @__PURE__ */ jsx(AvatarFallback, { ...getFallbackProps(fallbackProps) }), /* @__PURE__ */ jsx(AvatarImage, { ...getImageProps(imageProps) })]
	});
}, "root")(({ icon,...rest }) => ({
	icon: icon ?? /* @__PURE__ */ jsx(UserRoundIcon, { fontSize: "1.2em" }),
	...rest
}));
const AvatarImage = withContext("img", "image")();
const AvatarFallback = withContext("div", "fallback")();

//#endregion
export { Avatar, AvatarPropsContext, component, useAvatarPropsContext, useRootComponentProps };
//# sourceMappingURL=avatar.js.map