@metamask/design-system-react
Version:
Design system react ui components
33 lines • 1.9 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import { Slot } from "@radix-ui/react-slot";
import $React, { forwardRef } from "react";
const React = $importDefault($React);
import { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.mjs";
import { Text, FontWeight, TextVariant, TextColor } from "../Text/index.mjs";
import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE, TWCLASSMAP_AVATARBASE_SIZE_BORDER } from "./AvatarBase.constants.mjs";
export const AvatarBase = forwardRef(({ children, fallbackText, fallbackTextProps, className, size = AvatarBaseSize.Md, shape = AvatarBaseShape.Circle, asChild, style, hasBorder = false, ...props }, ref) => {
const Component = asChild ? Slot : 'div';
const mergedClassName = twMerge(
// Base styles
'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === AvatarBaseShape.Circle
? 'rounded-full'
: TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],
// Size
hasBorder
? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]
: TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],
// Border
hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],
// Custom classes
className);
return (React.createElement(Component, { ref: ref, className: mergedClassName, style: style, ...props }, fallbackText ? (React.createElement(Text, { variant: TextVariant.BodySm, fontWeight: FontWeight.Medium, color: TextColor.TextMuted, asChild: true, className: "uppercase", ...fallbackTextProps },
React.createElement("span", null, fallbackText))) : (children)));
});
AvatarBase.displayName = 'AvatarBase';
//# sourceMappingURL=AvatarBase.mjs.map