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

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

@@ -787,6 +787,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,
@@ -2502,6 +2520,7 @@ const theme = {
   forms,
   highlight,
   icon,
+  buttonBadge,
   iconButton,
   listItem,
   pageLoader,
@@ -3110,6 +3129,37 @@ Typography.h4 = createHeading(4, 'header4');
 /** @deprecated use Typography.Header6 */
 Typography.h5 = createHeading(5, 'header5');
 
+function ButtonBadge({
+  withBadge,
+  badgeCount
+}) {
+  if (withBadge) {
+    return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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',
@@ -3235,6 +3285,8 @@ function ButtonContentChildren({
   icon,
   iconPosition,
   innerSpacing,
+  withBadge,
+  badgeCount,
   color,
   children
 }) {
@@ -3281,6 +3333,12 @@ function ButtonContentChildren({
     }), icon && iconPosition === 'right' ? /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
       ...buttonIconSharedProps,
       icon: icon
+    }) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      marginLeft: "kitt.2",
+      children: /*#__PURE__*/jsxRuntime.jsx(ButtonBadge, {
+        withBadge: withBadge,
+        badgeCount: badgeCount
+      })
     }) : null]
   });
 }
@@ -3425,6 +3483,8 @@ const Button = /*#__PURE__*/react.forwardRef(({
   testID,
   href,
   hrefAttrs,
+  withBadge,
+  badgeCount,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3493,6 +3553,8 @@ const Button = /*#__PURE__*/react.forwardRef(({
           isDisabled: disabled,
           icon: icon,
           iconPosition: iconPosition,
+          withBadge: withBadge,
+          badgeCount: badgeCount,
           isHovered: isHovered,
           isPressed: isPressed,
           isFocused: isFocused,
@@ -3546,6 +3608,8 @@ const ActionsItem = /*#__PURE__*/react.forwardRef(({
 }, ref) => {
   const [isLoading, setIsLoading] = react.useState(false);
   const mountedRef = react.useRef(false);
+  // securing the loading state with a ref to avoid user action between rerenders
+  const loadingRef = react.useRef(false);
 
   // effect just for tracking mounted state, as onPress can unmount the ActionButton
   react.useEffect(() => {
@@ -3563,15 +3627,18 @@ const ActionsItem = /*#__PURE__*/react.forwardRef(({
       icon: isLoading ? /*#__PURE__*/jsxRuntime.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;
@@ -7636,7 +7703,7 @@ function IconButton({
   ariaLabel,
   accessibilityRole = 'button',
   withBadge,
-  bagdeCount,
+  badgeCount,
   isHoveredInternal,
   isPressedInternal,
   isFocusedInternal,
@@ -7696,32 +7763,13 @@ function IconButton({
               icon: icon
             })
           })]
-        }), withBadge ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(View, {
-          height: "20px",
-          width: "20px",
-          backgroundColor: lateOceanColorPalette['coral.10'],
-          borderRadius: "kitt.iconButton.borderRadius",
+        }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsxRuntime.jsx(View, {
           position: "absolute",
-          top: "-6px",
-          right: "-6px",
-          children: /*#__PURE__*/jsxRuntime.jsx(View, {
-            alignItems: "center",
-            justifyContent: "center",
-            marginTop: "2px",
-            children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(ButtonBadge, {
+            withBadge: withBadge,
+            badgeCount: badgeCount
           })
         }) : null]
       });
@@ -8796,6 +8844,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           backgroundColor: theme.skeleton.backgroundColor,
           flareColor: theme.skeleton.flareColor
         },
+        buttonBadge: {
+          backgroundColor: theme.buttonBadge.backgroundColor
+        },
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
@@ -8984,6 +9035,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderRadius: theme.button.borderRadius
         },
+        buttonBadge: {
+          borderRadius: theme.buttonBadge.borderRadius
+        },
         card: {
           borderRadius: theme.card.borderRadius
         },
@@ -9363,6 +9417,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: {
@@ -13088,6 +13154,7 @@ exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.BottomSheet = BottomSheet;
 exports.Button = Button;
+exports.ButtonBadge = ButtonBadge;
 exports.CardModal = CardModal;
 exports.Center = Center;
 exports.Checkbox = Checkbox;