@ornikar/kitt-universal 25.54.0 → 25.54.1-canary.111977bfdb623207808928fa770ffbe060b3b380.0

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

@@ -780,6 +780,24 @@ const button = {
   }
 };
 
+const buttonBadge = {
+  backgroundColor: lateOceanColorPalette['coral.10'],
+  dimensions: {
+    withBadge: {
+      width: 10,
+      height: 10
+    },
+    badgeCount: {
+      width: 20,
+      height: 20
+    }
+  },
+  borderRadius: {
+    withBadge: 5,
+    badgeCount: 10
+  }
+};
+
 const card = {
   borderRadius: 20,
   borderWidth: 2,
@@ -2495,6 +2513,7 @@ const theme = {
   forms,
   highlight,
   icon,
+  buttonBadge,
   iconButton,
   listItem,
   pageLoader,
@@ -3103,6 +3122,37 @@ Typography.h4 = createHeading(4, 'header4');
 /** @deprecated use Typography.Header6 */
 Typography.h5 = createHeading(5, 'header5');
 
+function ButtonBadge({
+  withBadge,
+  badgeCount
+}) {
+  if (withBadge) {
+    return /*#__PURE__*/jsx(View, {
+      height: "kitt.buttonBadge.dimensions.withBadge.height",
+      width: "kitt.buttonBadge.dimensions.withBadge.width",
+      backgroundColor: "kitt.buttonBadge.backgroundColor",
+      borderRadius: "kitt.buttonBadge.borderRadius.withBadge"
+    });
+  }
+  if (badgeCount && badgeCount > 0) {
+    return /*#__PURE__*/jsx(VStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "kitt.buttonBadge.dimensions.badgeCount.height",
+      width: "kitt.buttonBadge.dimensions.badgeCount.width",
+      backgroundColor: "kitt.buttonBadge.backgroundColor",
+      borderRadius: "kitt.buttonBadge.borderRadius.badgeCount",
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: "body-xs",
+        variant: "bold",
+        color: "white",
+        children: (badgeCount || 0) > 5 ? '+5' : badgeCount
+      })
+    });
+  }
+  return null;
+}
+
 function Icon({
   icon,
   size = 'kitt.icon.defaultSize',
@@ -3228,6 +3278,8 @@ function ButtonContentChildren({
   icon,
   iconPosition,
   innerSpacing,
+  withBadge,
+  badgeCount,
   color,
   children
 }) {
@@ -3274,6 +3326,12 @@ function ButtonContentChildren({
     }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, {
       ...buttonIconSharedProps,
       icon: icon
+    }) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
+      marginLeft: "kitt.2",
+      children: /*#__PURE__*/jsx(ButtonBadge, {
+        withBadge: withBadge,
+        badgeCount: badgeCount
+      })
     }) : null]
   });
 }
@@ -3418,6 +3476,8 @@ const Button = /*#__PURE__*/forwardRef(({
   testID,
   href,
   hrefAttrs,
+  withBadge,
+  badgeCount,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3486,6 +3546,8 @@ const Button = /*#__PURE__*/forwardRef(({
           isDisabled: disabled,
           icon: icon,
           iconPosition: iconPosition,
+          withBadge: withBadge,
+          badgeCount: badgeCount,
           isHovered: isHovered,
           isPressed: isPressed,
           isFocused: isFocused,
@@ -3539,6 +3601,8 @@ const ActionsItem = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [isLoading, setIsLoading] = useState(false);
   const mountedRef = useRef(false);
+  // securing the loading state with a ref to avoid user action between rerenders
+  const loadingRef = useRef(false);
 
   // effect just for tracking mounted state, as onPress can unmount the ActionButton
   useEffect(() => {
@@ -3556,15 +3620,18 @@ const ActionsItem = /*#__PURE__*/forwardRef(({
       icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
       onPress: e => {
         (async () => {
-          if (!onPress) return;
+          if (!onPress || loadingRef.current) return;
           setIsLoading(true);
+          loadingRef.current = true;
           try {
             await onPress(e);
             if (mountedRef.current) {
               setIsLoading(false);
+              loadingRef.current = false;
             }
           } catch (error) {
             if (mountedRef.current) {
+              loadingRef.current = false;
               setIsLoading(false);
             }
             throw error;
@@ -7629,7 +7696,7 @@ function IconButton({
   ariaLabel,
   accessibilityRole = 'button',
   withBadge,
-  bagdeCount,
+  badgeCount,
   isHoveredInternal,
   isPressedInternal,
   isFocusedInternal,
@@ -7689,32 +7756,13 @@ function IconButton({
               icon: icon
             })
           })]
-        }), withBadge ? /*#__PURE__*/jsx(View, {
-          height: "10px",
-          width: "10px",
-          backgroundColor: lateOceanColorPalette['coral.10'],
-          borderRadius: "kitt.iconButton.borderRadius",
-          position: "absolute",
-          top: "1px",
-          right: "1px"
-        }) : null, !withBadge && bagdeCount && bagdeCount > 0 ? /*#__PURE__*/jsx(View, {
-          height: "20px",
-          width: "20px",
-          backgroundColor: lateOceanColorPalette['coral.10'],
-          borderRadius: "kitt.iconButton.borderRadius",
+        }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
           position: "absolute",
-          top: "-6px",
-          right: "-6px",
-          children: /*#__PURE__*/jsx(View, {
-            alignItems: "center",
-            justifyContent: "center",
-            marginTop: "2px",
-            children: /*#__PURE__*/jsx(Typography.Text, {
-              base: "body-xs",
-              variant: "bold",
-              color: "white",
-              children: bagdeCount > 5 ? '+5' : bagdeCount
-            })
+          top: withBadge ? '1px' : '-6px',
+          right: withBadge ? '1px' : '-6px',
+          children: /*#__PURE__*/jsx(ButtonBadge, {
+            withBadge: withBadge,
+            badgeCount: badgeCount
           })
         }) : null]
       });
@@ -8789,6 +8837,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           backgroundColor: theme.skeleton.backgroundColor,
           flareColor: theme.skeleton.flareColor
         },
+        buttonBadge: {
+          backgroundColor: theme.buttonBadge.backgroundColor
+        },
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
@@ -8977,6 +9028,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderRadius: theme.button.borderRadius
         },
+        buttonBadge: {
+          borderRadius: theme.buttonBadge.borderRadius
+        },
         card: {
           borderRadius: theme.card.borderRadius
         },
@@ -9356,6 +9410,18 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           maxWidth: theme.button.maxWidth,
           minHeight: theme.button.minHeight
         },
+        buttonBadge: {
+          dimensions: {
+            withBadge: {
+              width: theme.buttonBadge.dimensions.withBadge.width,
+              height: theme.buttonBadge.dimensions.withBadge.height
+            },
+            badgeCount: {
+              width: theme.buttonBadge.dimensions.badgeCount.width,
+              height: theme.buttonBadge.dimensions.badgeCount.height
+            }
+          }
+        },
         icon: theme.icon,
         cardModal: {
           header: {
@@ -13069,5 +13135,5 @@ function VerticalSteps({
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-node-20.10.es.web.mjs.map