@ornikar/bumper 3.12.0 → 3.14.0

package/dist/index-node-22.22.es.web.mjs

@@ -1,9 +1,12 @@
 import { px, createFont, createTokens, createTamagui, TamaguiProvider, styled, View, Stack, useProps as useProps$1, useStyle, createStyledContext, Text, withStaticProperties, useMedia } from '@tamagui/core';
 export { Stack, View } from '@tamagui/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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';
@@ -207,7 +210,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 = {
@@ -846,7 +851,7 @@ function Icon(props) {
   });
 }
 
-const context$1 = createStyledContext({
+const context$2 = createStyledContext({
   size: 'large',
   type: 'secondary',
   isOnContrasted: false,
@@ -878,7 +883,7 @@ function ButtonIcon({
     type,
     disabled,
     isOnContrasted
-  } = context$1.useStyledContext();
+  } = context$2.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsx(Icon, {
     icon: icon,
@@ -971,7 +976,7 @@ function ButtonText({
     size,
     disabled,
     isOnContrasted
-  } = context$1.useStyledContext();
+  } = context$2.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsxs(VStack, {
     children: [/*#__PURE__*/jsx(Typography.Text, {
@@ -988,7 +993,7 @@ function ButtonText({
 
 const InternalButtonFrame = styled(HStack, {
   name: 'Button',
-  context: context$1,
+  context: context$2,
   role: 'button',
   alignItems: 'center',
   justifyContent: 'center',
@@ -1009,7 +1014,7 @@ const InternalButtonFrame = styled(HStack, {
       const {
         isOnContrasted,
         disabled
-      } = context$1.useStyledContext();
+      } = context$2.useStyledContext();
       const commonTypeStyle = {
         backgroundColor: `$button.bg.${type}${isOnContrasted ? '.onContrasted' : ''}.default`,
         hoverStyle: {
@@ -1135,7 +1140,7 @@ const Button = withStaticProperties(InternalButton, {
 
 const InternalIconButtonFrame = styled(InternalButton, {
   name: 'IconButton',
-  context: context$1,
+  context: context$2,
   variants: {
     size: {
       small: {
@@ -1163,6 +1168,132 @@ const IconButton = withStaticProperties(InternalIconButton, {
   Badge: ButtonBadge
 });
 
+const context$1 = createStyledContext({
+  size: 'large',
+  shape: 'square',
+  disabled: false
+});
+
+const StyledAvatarImage = styled(Image, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'contain',
+  alt: ''
+});
+const DisabledOverlay = styled(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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledAvatarImage, {
+      src: src
+    }), disabled ? /*#__PURE__*/jsx(DisabledOverlay, {}) : null]
+  });
+}
+
+function extractInitial({
+  firstname,
+  lastname
+}) {
+  return `${firstname[0]}${lastname[0]}`.toUpperCase();
+}
+const StyledAvatarInitial = 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__*/jsx(StyledAvatarInitial, {
+    children: extractInitial(props)
+  });
+}
+
+const 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'
+      }
+    }
+  }
+});
+const Avatar = InternalAvatarFrame.styleable((props, ref) => {
+  const flattenProps = useProps(props);
+  const children = useMemo(() => {
+    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.firstname ?? '',
+      lastname: flattenProps.lastname ?? ''
+    });
+  }, [flattenProps.src, flattenProps.firstname, flattenProps.lastname, flattenProps.disabled]);
+  return /*#__PURE__*/jsx(InternalAvatarFrame, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+
 const context = createStyledContext({
   color: 'green',
   size: 'small',
@@ -1352,5 +1483,57 @@ function SwitchBreakpoints(values) {
   return getValueForBreakpoint(breakpoint, values);
 }
 
-export { Badge, BumperProvider, Button, Center, HStack, IconButton, Loader, Pressable, Sticker, SwitchBreakpoints, Typography, VStack, getValueForBreakpoint, useBreakpointValue, useCurrentBreakpointName };
+const InternalDividerFrame = styled(View, {
+  name: 'Divider',
+  alignSelf: 'stretch',
+  variants: {
+    type: {
+      subtle: {},
+      strong: {}
+    },
+    isVertical: {
+      true: (_, {
+        props
+      }) => ({
+        width: props.type === 'strong' ? 8 : 1
+      }),
+      false: (_, {
+        props
+      }) => ({
+        height: props.type === 'strong' ? 8 : 1
+      })
+    },
+    isOnContrasted: {
+      true: (_, {
+        props
+      }) => ({
+        backgroundColor: props.type === 'strong' ? '$divider.border.strong.onContrasted' : '$divider.border.subtle.onContrasted'
+      }),
+      false: (_, {
+        props
+      }) => ({
+        backgroundColor: props.type === 'strong' ? '$divider.border.strong' : '$divider.border.subtle'
+      })
+    }
+  },
+  defaultVariants: {
+    type: 'subtle',
+    isVertical: false,
+    isOnContrasted: false
+  }
+});
+const InternalDivider = InternalDividerFrame.styleable((props, ref) => {
+  const flattenProps = useProps(props);
+  return /*#__PURE__*/jsx(InternalDividerFrame, {
+    ref: ref,
+    ...flattenProps
+  });
+});
+function Divider(props) {
+  return /*#__PURE__*/jsx(InternalDivider, {
+    ...props
+  });
+}
+
+export { Avatar, Badge, BumperProvider, Button, Center, Divider, HStack, IconButton, Loader, Pressable, Sticker, SwitchBreakpoints, Typography, VStack, getValueForBreakpoint, useBreakpointValue, useCurrentBreakpointName };
 //# sourceMappingURL=index-node-22.22.es.web.mjs.map