@ornikar/kitt-universal 25.54.0 → 25.55.0

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

@@ -661,20 +661,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: {
@@ -784,6 +789,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,
@@ -2499,6 +2522,7 @@ const theme = {
   forms,
   highlight,
   icon,
+  buttonBadge,
   iconButton,
   listItem,
   pageLoader,
@@ -3063,6 +3087,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',
@@ -3188,6 +3243,8 @@ function ButtonContentChildren({
   icon,
   iconPosition,
   innerSpacing,
+  withBadge,
+  badgeCount,
   color,
   children
 }) {
@@ -3234,6 +3291,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]
   });
 }
@@ -3271,22 +3334,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__*/jsx(View, {
     position: "relative",
@@ -3295,6 +3355,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
   });
@@ -3417,6 +3478,8 @@ const Button = /*#__PURE__*/forwardRef(({
   testID,
   href,
   hrefAttrs,
+  withBadge,
+  badgeCount,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3481,13 +3544,15 @@ const Button = /*#__PURE__*/forwardRef(({
       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,
@@ -8471,7 +8536,7 @@ function IconButton({
   ariaLabel,
   accessibilityRole = 'button',
   withBadge,
-  bagdeCount,
+  badgeCount,
   isHoveredInternal,
   isPressedInternal,
   isFocusedInternal,
@@ -8534,32 +8599,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]
       });
@@ -9551,6 +9597,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           backgroundColor: theme.skeleton.backgroundColor,
           flareColor: theme.skeleton.flareColor
         },
+        buttonBadge: {
+          backgroundColor: theme.buttonBadge.backgroundColor
+        },
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
@@ -9739,6 +9788,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderRadius: theme.button.borderRadius
         },
+        buttonBadge: {
+          borderRadius: theme.buttonBadge.borderRadius
+        },
         card: {
           borderRadius: theme.card.borderRadius
         },
@@ -10118,6 +10170,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: {
@@ -13946,5 +14010,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, FlatList as 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, FlatList as 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.mjs.map