@metamask/design-system-react-native/dist/components/AvatarBase/AvatarBase.mjs

Design System React Native

function $importDefault(module) {
    if (module?.__esModule) {
        return module.default;
    }
    return module;
}
import { useTailwind } from "@metamask/design-system-twrnc-preset";
import $React from "react";
const React = $importDefault($React);
import { View } from "react-native/index.js";
import { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
import { Text, TextColor, TextVariant, FontWeight } 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 = ({ children, size = AvatarBaseSize.Md, shape = AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName = '', style, ...props }) => {
    const tw = useTailwind();
    const twContainerClassNames = `
    items-center justify-center overflow-hidden bg-section
    ${shape === AvatarBaseShape.Circle
        ? 'rounded-full'
        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]}
    ${hasBorder ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}
    ${hasBorder ? TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] : ''}
    ${twClassName}
  `;
    return (<View style={[tw `${twContainerClassNames}`, style]} {...props}>
      {fallbackText ? (<Text color={TextColor.TextMuted} variant={TextVariant.BodySm} fontWeight={FontWeight.Medium} {...fallbackTextProps} twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}>
          {fallbackText}
        </Text>) : (children)}
    </View>);
};
//# sourceMappingURL=AvatarBase.mjs.map