@ornikar/kitt-universal 25.54.0 → 25.55.0

package/dist/index.es.web.js

@@ -675,20 +675,25 @@ var 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: {
@@ -798,6 +803,24 @@ var button = {
   }
 };
 
+var buttonBadge = {
+  backgroundColor: lateOceanColorPalette['coral.10'],
+  dimensions: {
+    withBadge: {
+      width: 10,
+      height: 10
+    },
+    badgeCount: {
+      width: 20,
+      height: 20
+    }
+  },
+  borderRadius: {
+    withBadge: 5,
+    badgeCount: 10
+  }
+};
+
 var card = {
   borderRadius: 20,
   borderWidth: 2,
@@ -2521,6 +2544,7 @@ var theme = {
   forms: forms,
   highlight: highlight,
   icon: icon,
+  buttonBadge: buttonBadge,
   iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
@@ -3137,6 +3161,36 @@ Typography.h4 = createHeading(4, 'header4');
 /** @deprecated use Typography.Header6 */
 Typography.h5 = createHeading(5, 'header5');
 
+function ButtonBadge(_ref) {
+  var withBadge = _ref.withBadge,
+    badgeCount = _ref.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(_ref) {
   var icon = _ref.icon,
     _ref$size = _ref.size,
@@ -3255,6 +3309,8 @@ function ButtonContentChildren(_ref2) {
     icon = _ref2.icon,
     iconPosition = _ref2.iconPosition,
     innerSpacing = _ref2.innerSpacing,
+    withBadge = _ref2.withBadge,
+    badgeCount = _ref2.badgeCount,
     color = _ref2.color,
     children = _ref2.children;
   if ((process.env.NODE_ENV !== "production")) {
@@ -3298,7 +3354,13 @@ function ButtonContentChildren(_ref2) {
       children: children
     }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       icon: icon
-    })) : null]
+    })) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
+      marginLeft: "kitt.2",
+      children: /*#__PURE__*/jsx(ButtonBadge, {
+        withBadge: withBadge,
+        badgeCount: badgeCount
+      })
+    }) : null]
   });
 }
 function ButtonContent(_ref3) {
@@ -3334,20 +3396,17 @@ function ButtonContent(_ref3) {
 }
 
 function getCurrentPaddingConfig(_ref) {
-  var size = _ref.size,
-    isDisabled = _ref.isDisabled;
+  var size = _ref.size;
   if (size === 'large') return 'large';
   if (size === 'xLarge') return 'xLarge';
-  if (isDisabled) return 'disabled';
   return 'default';
 }
 function ButtonPadding(_ref2) {
   var children = _ref2.children,
     size = _ref2.size,
-    isDisabled = _ref2.isDisabled;
+    hasBadge = _ref2.hasBadge;
   var currentPaddingKey = getCurrentPaddingConfig({
-    size: size,
-    isDisabled: isDisabled
+    size: size
   });
   return /*#__PURE__*/jsx(View, {
     position: "relative",
@@ -3356,6 +3415,7 @@ function ButtonPadding(_ref2) {
     justifyContent: "center",
     paddingX: "kitt.button.padding.".concat(currentPaddingKey, ".horizontal"),
     paddingY: "kitt.button.padding.".concat(currentPaddingKey, ".vertical"),
+    paddingRight: hasBadge ? "kitt.button.padding.".concat(currentPaddingKey, ".hasBadge.right") : undefined,
     minHeight: "kitt.button.minHeight",
     children: children
   });
@@ -3437,6 +3497,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID = _ref.testID,
     href = _ref.href,
     hrefAttrs = _ref.hrefAttrs,
+    withBadge = _ref.withBadge,
+    badgeCount = _ref.badgeCount,
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     _ref$innerSpacing = _ref.innerSpacing,
@@ -3498,13 +3560,15 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
         isStretch: stretch,
         children: /*#__PURE__*/jsxs(ButtonPadding, {
           size: size,
-          isDisabled: disabled,
+          hasBadge: Boolean(withBadge || badgeCount && badgeCount > 0),
           children: [/*#__PURE__*/jsx(ButtonContent, {
             type: type,
             variant: variant,
             isDisabled: disabled,
             icon: icon,
             iconPosition: iconPosition,
+            withBadge: withBadge,
+            badgeCount: badgeCount,
             isHovered: isHovered,
             isPressed: isPressed,
             isFocused: isFocused,
@@ -7819,7 +7883,7 @@ function IconButton(_ref) {
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     withBadge = _ref.withBadge,
-    bagdeCount = _ref.bagdeCount,
+    badgeCount = _ref.badgeCount,
     isHoveredInternal = _ref.isHoveredInternal,
     isPressedInternal = _ref.isPressedInternal,
     isFocusedInternal = _ref.isFocusedInternal,
@@ -7876,32 +7940,13 @@ function IconButton(_ref) {
               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]
       });
@@ -8980,6 +9025,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           backgroundColor: theme.skeleton.backgroundColor,
           flareColor: theme.skeleton.flareColor
         },
+        buttonBadge: {
+          backgroundColor: theme.buttonBadge.backgroundColor
+        },
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
@@ -9167,6 +9215,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderRadius: theme.button.borderRadius
         },
+        buttonBadge: {
+          borderRadius: theme.buttonBadge.borderRadius
+        },
         card: {
           borderRadius: theme.card.borderRadius
         },
@@ -9543,6 +9594,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: {
@@ -13262,5 +13325,5 @@ function VerticalSteps(_ref) {
 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.es.web.js.map