@ornikar/bumper 3.13.0 → 3.14.0

package/dist/index-node-22.22.cjs.web.js

@@ -7,6 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const Animated = require('react-native-reanimated');
 const Svg = require('react-native-svg');
+const AvatarPlaceholderDisabledImage = require('./system/dataDisplays/Avatar/assets/avatar-placeholder-disabled.webp');
+const AvatarPlaceholderImage = require('./system/dataDisplays/Avatar/assets/avatar-placeholder.webp');
 const image = require('@tamagui/image');
 const scrollView = require('@tamagui/scroll-view');
 const reactNative = require('react-native');
@@ -15,6 +17,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 const Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
+const AvatarPlaceholderDisabledImage__default = /*#__PURE__*/_interopDefaultLegacy(AvatarPlaceholderDisabledImage);
+const AvatarPlaceholderImage__default = /*#__PURE__*/_interopDefaultLegacy(AvatarPlaceholderImage);
 
 const createColorScale = colorScale => colorScale;
 
@@ -215,7 +219,9 @@ const light = {
   'button.bg.danger.default': deepPurpleColorPalette['palette.transparent'],
   'button.bg.danger.pressed': deepPurpleColorPalette['palette.red.1'],
   'button.bg.danger.onContrasted.default': deepPurpleColorPalette['palette.white'],
-  'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['palette.red.1']
+  'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['palette.red.1'],
+  // Avatar
+  'avatar.bg': deepPurpleColorPalette['palette.beige.3']
 };
 
 const themes = {
@@ -854,7 +860,7 @@ function Icon(props) {
   });
 }
 
-const context$1 = core.createStyledContext({
+const context$2 = core.createStyledContext({
   size: 'large',
   type: 'secondary',
   isOnContrasted: false,
@@ -886,7 +892,7 @@ function ButtonIcon({
     type,
     disabled,
     isOnContrasted
-  } = context$1.useStyledContext();
+  } = context$2.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     icon: icon,
@@ -979,7 +985,7 @@ function ButtonText({
     size,
     disabled,
     isOnContrasted
-  } = context$1.useStyledContext();
+  } = context$2.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsxRuntime.jsxs(VStack, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
@@ -996,7 +1002,7 @@ function ButtonText({
 
 const InternalButtonFrame = core.styled(HStack, {
   name: 'Button',
-  context: context$1,
+  context: context$2,
   role: 'button',
   alignItems: 'center',
   justifyContent: 'center',
@@ -1017,7 +1023,7 @@ const InternalButtonFrame = core.styled(HStack, {
       const {
         isOnContrasted,
         disabled
-      } = context$1.useStyledContext();
+      } = context$2.useStyledContext();
       const commonTypeStyle = {
         backgroundColor: `$button.bg.${type}${isOnContrasted ? '.onContrasted' : ''}.default`,
         hoverStyle: {
@@ -1143,7 +1149,7 @@ const Button = core.withStaticProperties(InternalButton, {
 
 const InternalIconButtonFrame = core.styled(InternalButton, {
   name: 'IconButton',
-  context: context$1,
+  context: context$2,
   variants: {
     size: {
       small: {
@@ -1171,6 +1177,132 @@ const IconButton = core.withStaticProperties(InternalIconButton, {
   Badge: ButtonBadge
 });
 
+const context$1 = core.createStyledContext({
+  size: 'large',
+  shape: 'square',
+  disabled: false
+});
+
+const StyledAvatarImage = core.styled(image.Image, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+  alt: ''
+});
+const DisabledOverlay = core.styled(core.View, {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  backgroundColor: '$bg.base.mid.default',
+  opacity: 0.5
+});
+function AvatarImage({
+  src
+}) {
+  const {
+    disabled
+  } = context$1.useStyledContext();
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledAvatarImage, {
+      src: src
+    }), disabled ? /*#__PURE__*/jsxRuntime.jsx(DisabledOverlay, {}) : null]
+  });
+}
+
+function extractInitial({
+  firstname,
+  lastname
+}) {
+  return `${firstname[0]}${lastname[0]}`.toUpperCase();
+}
+const StyledAvatarInitial = core.styled(InternalTypography, {
+  context: context$1,
+  variants: {
+    size: size => ({
+      variant: size === 'small' ? 'label-m' : 'label-l'
+    }),
+    disabled: {
+      true: {
+        color: '$content.disabled.onContrasted'
+      },
+      false: {
+        color: '$content.accent'
+      }
+    }
+  }
+});
+function AvatarInitial(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarInitial, {
+    children: extractInitial(props)
+  });
+}
+
+const InternalAvatarFrame = core.styled(Center, {
+  name: 'Avatar',
+  context: context$1,
+  overflow: 'hidden',
+  variants: {
+    size: {
+      small: {
+        width: 32,
+        height: 32
+      },
+      medium: {
+        width: 40,
+        height: 40
+      },
+      large: {
+        width: 48,
+        height: 48
+      },
+      xlarge: {
+        width: 64,
+        height: 64
+      }
+    },
+    shape: {
+      square: {
+        borderRadius: '$radius.m'
+      },
+      circle: {
+        borderRadius: '$radius.circle'
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$bg.disabled.hi'
+      },
+      false: {
+        backgroundColor: '$avatar.bg'
+      }
+    }
+  }
+});
+const Avatar = InternalAvatarFrame.styleable((props, ref) => {
+  const flattenProps = useProps(props);
+  const children = react.useMemo(() => {
+    if (!flattenProps.src && !flattenProps.firstname && !flattenProps.lastname) {
+      return /*#__PURE__*/jsxRuntime.jsx(AvatarImage, {
+        src: flattenProps.disabled ? AvatarPlaceholderDisabledImage__default : AvatarPlaceholderImage__default
+      });
+    }
+    if (flattenProps.src) {
+      return /*#__PURE__*/jsxRuntime.jsx(AvatarImage, {
+        src: flattenProps.src
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(AvatarInitial, {
+      firstname: flattenProps.firstname ?? '',
+      lastname: flattenProps.lastname ?? ''
+    });
+  }, [flattenProps.src, flattenProps.firstname, flattenProps.lastname, flattenProps.disabled]);
+  return /*#__PURE__*/jsxRuntime.jsx(InternalAvatarFrame, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+
 const context = core.createStyledContext({
   color: 'green',
   size: 'small',
@@ -1417,6 +1549,7 @@ exports.View = core.View;
 exports.Image = image.Image;
 exports.ScrollView = scrollView.ScrollView;
 exports.useWindowSize = reactNative.useWindowDimensions;
+exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BumperProvider = BumperProvider;
 exports.Button = Button;