@ornikar/bumper 3.12.0 → 3.14.0

package/dist/index.es.web.js

@@ -3,11 +3,14 @@ export { Stack, View } from '@tamagui/core';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useEffect, cloneElement, useMemo } from 'react';
 import Animated, { Easing, useAnimatedProps, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
+import AvatarPlaceholderDisabledImage from './system/dataDisplays/Avatar/assets/avatar-placeholder-disabled.webp';
+import AvatarPlaceholderImage from './system/dataDisplays/Avatar/assets/avatar-placeholder.webp';
+import { Image } from '@tamagui/image';
 export { Image } from '@tamagui/image';
 export { ScrollView } from '@tamagui/scroll-view';
 export { useWindowDimensions as useWindowSize } from 'react-native';
@@ -218,7 +221,9 @@ var 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']
 };
 
 var themes = {
@@ -823,7 +828,7 @@ function Icon(props) {
   return /*#__PURE__*/jsx(InternalIcon, _objectSpread({}, props));
 }
 
-var context$1 = createStyledContext({
+var context$2 = createStyledContext({
   size: 'large',
   type: 'secondary',
   isOnContrasted: false,
@@ -850,7 +855,7 @@ function getButtonContentColor(type, disabled, isOnContrasted) {
 
 function ButtonIcon(_ref) {
   var icon = _ref.icon;
-  var _context$useStyledCon = context$1.useStyledContext(),
+  var _context$useStyledCon = context$2.useStyledContext(),
     type = _context$useStyledCon.type,
     disabled = _context$useStyledCon.disabled,
     isOnContrasted = _context$useStyledCon.isOnContrasted;
@@ -934,7 +939,7 @@ var Typography = {
 
 function ButtonText(_ref) {
   var children = _ref.children;
-  var _context$useStyledCon = context$1.useStyledContext(),
+  var _context$useStyledCon = context$2.useStyledContext(),
     type = _context$useStyledCon.type,
     size = _context$useStyledCon.size,
     disabled = _context$useStyledCon.disabled,
@@ -955,7 +960,7 @@ function ButtonText(_ref) {
 
 var InternalButtonFrame = styled(HStack, {
   name: 'Button',
-  context: context$1,
+  context: context$2,
   role: 'button',
   alignItems: 'center',
   justifyContent: 'center',
@@ -973,7 +978,7 @@ var InternalButtonFrame = styled(HStack, {
   },
   variants: {
     type: function (_type) {
-      var _context$useStyledCon = context$1.useStyledContext(),
+      var _context$useStyledCon = context$2.useStyledContext(),
         isOnContrasted = _context$useStyledCon.isOnContrasted,
         disabled = _context$useStyledCon.disabled;
       var commonTypeStyle = {
@@ -1096,7 +1101,7 @@ var Button = withStaticProperties(InternalButton, {
 
 var InternalIconButtonFrame = styled(InternalButton, {
   name: 'IconButton',
-  context: context$1,
+  context: context$2,
   variants: {
     size: {
       small: {
@@ -1122,6 +1127,132 @@ var IconButton = withStaticProperties(InternalIconButton, {
   Badge: ButtonBadge
 });
 
+var context$1 = createStyledContext({
+  size: 'large',
+  shape: 'square',
+  disabled: false
+});
+
+var StyledAvatarImage = styled(Image, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+  alt: ''
+});
+var DisabledOverlay = styled(View, {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  backgroundColor: '$bg.base.mid.default',
+  opacity: 0.5
+});
+function AvatarImage(_ref) {
+  var src = _ref.src;
+  var _context$useStyledCon = context$1.useStyledContext(),
+    disabled = _context$useStyledCon.disabled;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledAvatarImage, {
+      src: src
+    }), disabled ? /*#__PURE__*/jsx(DisabledOverlay, {}) : null]
+  });
+}
+
+function extractInitial(_ref) {
+  var firstname = _ref.firstname,
+    lastname = _ref.lastname;
+  return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
+}
+var StyledAvatarInitial = styled(InternalTypography, {
+  context: context$1,
+  variants: {
+    size: function (_size) {
+      return {
+        variant: _size === 'small' ? 'label-m' : 'label-l'
+      };
+    },
+    disabled: {
+      "true": {
+        color: '$content.disabled.onContrasted'
+      },
+      "false": {
+        color: '$content.accent'
+      }
+    }
+  }
+});
+function AvatarInitial(props) {
+  return /*#__PURE__*/jsx(StyledAvatarInitial, {
+    children: extractInitial(props)
+  });
+}
+
+var InternalAvatarFrame = 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'
+      }
+    }
+  }
+});
+var Avatar = InternalAvatarFrame.styleable(function (props, ref) {
+  var flattenProps = useProps(props);
+  var children = useMemo(function () {
+    var _flattenProps$firstna, _flattenProps$lastnam;
+    if (!flattenProps.src && !flattenProps.firstname && !flattenProps.lastname) {
+      return /*#__PURE__*/jsx(AvatarImage, {
+        src: flattenProps.disabled ? AvatarPlaceholderDisabledImage : AvatarPlaceholderImage
+      });
+    }
+    if (flattenProps.src) {
+      return /*#__PURE__*/jsx(AvatarImage, {
+        src: flattenProps.src
+      });
+    }
+    return /*#__PURE__*/jsx(AvatarInitial, {
+      firstname: (_flattenProps$firstna = flattenProps.firstname) !== null && _flattenProps$firstna !== void 0 ? _flattenProps$firstna : '',
+      lastname: (_flattenProps$lastnam = flattenProps.lastname) !== null && _flattenProps$lastnam !== void 0 ? _flattenProps$lastnam : ''
+    });
+  }, [flattenProps.src, flattenProps.firstname, flattenProps.lastname, flattenProps.disabled]);
+  return /*#__PURE__*/jsx(InternalAvatarFrame, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    children: children
+  }));
+});
+
 var context = createStyledContext({
   color: 'green',
   size: 'small',
@@ -1305,5 +1436,58 @@ function SwitchBreakpoints(values) {
   return getValueForBreakpoint(breakpoint, values);
 }
 
-export { Badge, BumperProvider, Button, Center, HStack, IconButton, Loader, Pressable, Sticker, SwitchBreakpoints, Typography, VStack, getValueForBreakpoint, useBreakpointValue, useCurrentBreakpointName };
+var InternalDividerFrame = styled(View, {
+  name: 'Divider',
+  alignSelf: 'stretch',
+  variants: {
+    type: {
+      subtle: {},
+      strong: {}
+    },
+    isVertical: {
+      "true": function (_, _ref) {
+        var props = _ref.props;
+        return {
+          width: props.type === 'strong' ? 8 : 1
+        };
+      },
+      "false": function (_, _ref2) {
+        var props = _ref2.props;
+        return {
+          height: props.type === 'strong' ? 8 : 1
+        };
+      }
+    },
+    isOnContrasted: {
+      "true": function (_, _ref3) {
+        var props = _ref3.props;
+        return {
+          backgroundColor: props.type === 'strong' ? '$divider.border.strong.onContrasted' : '$divider.border.subtle.onContrasted'
+        };
+      },
+      "false": function (_, _ref4) {
+        var props = _ref4.props;
+        return {
+          backgroundColor: props.type === 'strong' ? '$divider.border.strong' : '$divider.border.subtle'
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    type: 'subtle',
+    isVertical: false,
+    isOnContrasted: false
+  }
+});
+var InternalDivider = InternalDividerFrame.styleable(function (props, ref) {
+  var flattenProps = useProps(props);
+  return /*#__PURE__*/jsx(InternalDividerFrame, _objectSpread({
+    ref: ref
+  }, flattenProps));
+});
+function Divider(props) {
+  return /*#__PURE__*/jsx(InternalDivider, _objectSpread({}, props));
+}
+
+export { Avatar, Badge, BumperProvider, Button, Center, Divider, HStack, IconButton, Loader, Pressable, Sticker, SwitchBreakpoints, Typography, VStack, getValueForBreakpoint, useBreakpointValue, useCurrentBreakpointName };
 //# sourceMappingURL=index.es.web.js.map