@ornikar/kitt-universal 25.54.0 → 25.55.0

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

@@ -664,20 +664,25 @@ const button = {
   },
   padding: {
     default: {
+      hasBadge: {
+        right: 8
+      },
       horizontal: 16,
       vertical: 7
     },
     large: {
+      hasBadge: {
+        right: 12
+      },
       horizontal: 24,
       vertical: 11
     },
     xLarge: {
+      hasBadge: {
+        right: 12
+      },
       horizontal: 24,
       vertical: 15
-    },
-    disabled: {
-      horizontal: 14,
-      vertical: 5
     }
   },
   transition: {
@@ -787,6 +792,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 +2525,7 @@ const theme = {
   forms,
   highlight,
   icon,
+  buttonBadge,
   iconButton,
   listItem,
   pageLoader,
@@ -3110,6 +3134,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 +3290,8 @@ function ButtonContentChildren({
   icon,
   iconPosition,
   innerSpacing,
+  withBadge,
+  badgeCount,
   color,
   children
 }) {
@@ -3281,6 +3338,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]
   });
 }
@@ -3318,22 +3381,19 @@ function ButtonContent({
 }
 
 function getCurrentPaddingConfig({
-  size,
-  isDisabled
+  size
 }) {
   if (size === 'large') return 'large';
   if (size === 'xLarge') return 'xLarge';
-  if (isDisabled) return 'disabled';
   return 'default';
 }
 function ButtonPadding({
   children,
   size,
-  isDisabled
+  hasBadge
 }) {
   const currentPaddingKey = getCurrentPaddingConfig({
-    size,
-    isDisabled
+    size
   });
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "relative",
@@ -3342,6 +3402,7 @@ function ButtonPadding({
     justifyContent: "center",
     paddingX: `kitt.button.padding.${currentPaddingKey}.horizontal`,
     paddingY: `kitt.button.padding.${currentPaddingKey}.vertical`,
+    paddingRight: hasBadge ? `kitt.button.padding.${currentPaddingKey}.hasBadge.right` : undefined,
     minHeight: "kitt.button.minHeight",
     children: children
   });
@@ -3425,6 +3486,8 @@ const Button = /*#__PURE__*/react.forwardRef(({
   testID,
   href,
   hrefAttrs,
+  withBadge,
+  badgeCount,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3486,13 +3549,15 @@ const Button = /*#__PURE__*/react.forwardRef(({
       isStretch: stretch,
       children: /*#__PURE__*/jsxRuntime.jsxs(ButtonPadding, {
         size: size,
-        isDisabled: disabled,
+        hasBadge: Boolean(withBadge || badgeCount && badgeCount > 0),
         children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
           type: type,
           variant: variant,
           isDisabled: disabled,
           icon: icon,
           iconPosition: iconPosition,
+          withBadge: withBadge,
+          badgeCount: badgeCount,
           isHovered: isHovered,
           isPressed: isPressed,
           isFocused: isFocused,
@@ -7636,7 +7701,7 @@ function IconButton({
   ariaLabel,
   accessibilityRole = 'button',
   withBadge,
-  bagdeCount,
+  badgeCount,
   isHoveredInternal,
   isPressedInternal,
   isFocusedInternal,
@@ -7696,32 +7761,13 @@ function IconButton({
               icon: icon
             })
           })]
-        }), withBadge ? /*#__PURE__*/jsxRuntime.jsx(View, {
-          height: "10px",
-          width: "10px",
-          backgroundColor: lateOceanColorPalette['coral.10'],
-          borderRadius: "kitt.iconButton.borderRadius",
+        }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsxRuntime.jsx(View, {
           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",
-          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 +8842,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 +9033,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderRadius: theme.button.borderRadius
         },
+        buttonBadge: {
+          borderRadius: theme.buttonBadge.borderRadius
+        },
         card: {
           borderRadius: theme.card.borderRadius
         },
@@ -9363,6 +9415,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 +13152,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;