@ornikar/kitt-universal 29.0.0 → 29.2.0

package/dist/index-node-22.17.cjs.js

@@ -2341,6 +2341,11 @@ const skeleton = {
   }
 };
 
+const sticker = {
+  borderRadius: 2,
+  padding: 4
+};
+
 const tabBar = {
   underline: {
     default: {
@@ -2659,6 +2664,7 @@ const theme = {
   skeleton,
   tabBar,
   tag,
+  sticker,
   tooltip,
   typography,
   fullscreenModal,
@@ -10015,6 +10021,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         tag: {
           borderRadius: theme.tag.borderRadius
         },
+        sticker: {
+          borderRadius: theme.sticker.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -10807,6 +10816,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        sticker: {
+          padding: theme.sticker.padding
+        },
         toggle: {
           primary: {
             enabled: {
@@ -11780,7 +11792,7 @@ function AnimatedLoaderCircle({
     return {
       strokeDashoffset: circlePerimeter - circlePerimeter * progress.value
     };
-  });
+  }, [progress, circlePerimeter]);
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedCircle, {
     "transform-origin": "center center",
     strokeWidth: strokeWidth,
@@ -11851,7 +11863,7 @@ function AnimatedFillCircleContainer({
         rotate: `${360 * progress.value}deg`
       }]
     };
-  });
+  }, [progress]);
   return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
     style: [reactNative.StyleSheet.absoluteFill, rotationStyles],
     children: children
@@ -12528,6 +12540,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__*/jsxRuntime.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__*/jsxRuntime.jsx(View, {
+      flexShrink: 1,
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: getTypographySize(size),
+        color: colorMatching[color].font,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: label
+      })
+    })
+  });
+}
+
 function Flex({
   direction,
   wrap = 'wrap',
@@ -14197,6 +14301,7 @@ exports.Skeleton = Skeleton;
 exports.SpinningIcon = SpinningIcon;
 exports.Stack = Stack;
 exports.StaticMap = StaticMap;
+exports.Sticker = Sticker;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;