@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
39 lines (35 loc) • 2.04 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_user_round_icon = require('../icon/icons/user-round-icon.cjs');
const require_avatar_style = require('./avatar.style.cjs');
const require_use_avatar = require('./use-avatar.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/avatar/avatar.tsx
const { component, PropsContext: AvatarPropsContext, usePropsContext: useAvatarPropsContext, withContext, withProvider, useRootComponentProps } = require_create_component.createSlotComponent("avatar", require_avatar_style.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 } = require_use_avatar.useAvatar(rest);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getRootProps(),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarFallback, { ...getFallbackProps(fallbackProps) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarImage, { ...getImageProps(imageProps) })]
});
}, "root")(({ icon,...rest }) => ({
icon: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_user_round_icon.UserRoundIcon, { fontSize: "1.2em" }),
...rest
}));
const AvatarImage = withContext("img", "image")();
const AvatarFallback = withContext("div", "fallback")();
//#endregion
exports.Avatar = Avatar;
exports.AvatarPropsContext = AvatarPropsContext;
exports.component = component;
exports.useAvatarPropsContext = useAvatarPropsContext;
exports.useRootComponentProps = useRootComponentProps;
//# sourceMappingURL=avatar.cjs.map