@ornikar/kitt-universal 29.0.0 → 29.1.0

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

@@ -2314,6 +2314,11 @@ const skeleton$1 = {
   }
 };
 
+const sticker = {
+  borderRadius: 2,
+  padding: 4
+};
+
 const tabBar = {
   underline: {
     default: {
@@ -2632,6 +2637,7 @@ const theme = {
   skeleton: skeleton$1,
   tabBar,
   tag,
+  sticker,
   tooltip,
   typography,
   fullscreenModal,
@@ -9181,6 +9187,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         tag: {
           borderRadius: theme.tag.borderRadius
         },
+        sticker: {
+          borderRadius: theme.sticker.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -9973,6 +9982,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        sticker: {
+          padding: theme.sticker.padding
+        },
         toggle: {
           primary: {
             enabled: {
@@ -11604,6 +11616,98 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
+const getTypographySize = size => {
+  switch (size) {
+    case 'small':
+      return 'content-caps-xs';
+    case 'medium':
+      return 'content-caps-m';
+    case 'large':
+    default:
+      return 'content-caps-l';
+  }
+};
+function Sticker({
+  label,
+  color = 'linen',
+  size = 'medium'
+}) {
+  const kittTheme = useKittTheme();
+  const colorMatching = {
+    green: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.green-grass'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.green-apple']
+    },
+    darkGreen: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.green-pine'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.blue-sky']
+    },
+    blue: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.blue-sky'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.green-pine']
+    },
+    darkBlue: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.blue-electric'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.3']
+    },
+    red: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.brick'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.sun']
+    },
+    orange: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.orange'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.2']
+    },
+    pink: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.pink'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.brick']
+    },
+    gold: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.gold'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.1']
+    },
+    cream: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.1'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.brick']
+    },
+    linen: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.3'],
+      font: kittTheme.kitt.palettes.deepPurple['deepPurple.8']
+    },
+    promo: {
+      background: kittTheme.kitt.palettes.deepPurple['lightning.5'],
+      font: kittTheme.kitt.palettes.deepPurple['lightning.7']
+    },
+    darkPromo: {
+      background: kittTheme.kitt.palettes.deepPurple['lightning.7'],
+      font: kittTheme.kitt.palettes.deepPurple['lightning.5']
+    },
+    disabled: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.6'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.2']
+    }
+  };
+  return /*#__PURE__*/jsx(HStack, {
+    alignSelf: "flex-start",
+    borderRadius: "kitt.sticker.borderRadius",
+    padding: "kitt.sticker.padding",
+    backgroundColor: colorMatching[color].background,
+    space: "kitt.1",
+    alignItems: "center",
+    maxWidth: "100%",
+    children: /*#__PURE__*/jsx(View, {
+      flexShrink: 1,
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: getTypographySize(size),
+        color: colorMatching[color].font,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: label
+      })
+    })
+  });
+}
+
 function Flex({
   direction,
   wrap = 'wrap',
@@ -13144,5 +13248,5 @@ function VerticalSteps({
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-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, NavigationBottomSheet, 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, TopNavBar, 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, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, 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-22.17.es.web.mjs.map