@ornikar/kitt-universal 3.4.0 → 3.7.1

package/dist/index-node-14.17.cjs.css

@@ -1,2 +1,2 @@
-@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (var(--p1nlccvg-1)){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
+@media (hover:none) and (pointer:coarse){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.p1nlccvg,.p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.p1nlccvg > *:hover,.kitt-hover .p1nlccvg > *,.p1nlccvg > *:focus,.kitt-focus .p1nlccvg > *,.p1nlccvg > [data-focusvisible-polyfill],.p1nlccvg > *:active,.kitt-active .p1nlccvg > *{background-color:var(--p1nlccvg-4);}
 .tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:none;text-decoration:none;}.tcwz3nt > *:hover,.tcwz3nt > *:active,.kitt-hover .tcwz3nt > *{-webkit-text-decoration:var(--tcwz3nt-0);text-decoration:var(--tcwz3nt-0);}

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

@@ -12,6 +12,7 @@ const twemojiParser = require('twemoji-parser');
 const WebBrowser = require('expo-web-browser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const react$1 = require('@linaria/react');
+const expoLinearGradient = require('expo-linear-gradient');
 const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactIntl = require('react-intl');
 const reactNative$1 = require('@floating-ui/react-native');
@@ -316,31 +317,35 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-const getFirstCharacter = string => string ? string[0] : '';
-
-const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
+const getInitials = (firstname, lastname) => `${firstname[0]}${lastname[0]}`.toUpperCase();
 
 const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
-})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
-  round,
-  size
-}) => round ? size / 2 : 10, ({
+})(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   theme,
-  light
-}) => light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
-  size
-}) => size, ({
-  size
-}) => size);
+  $isRound,
+  $size
+}) => {
+  if ($isRound) return `${$size / 2}px`;
+  return theme.kitt.avatar.borderRadius;
+}, ({
+  theme,
+  $isLight
+}) => $isLight ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
+  $size
+}) => $size, ({
+  $size
+}) => $size);
 
 function AvatarContent({
-  size = 40,
+  size,
   src,
   firstname,
   lastname,
-  light
+  alt,
+  base,
+  isLight
 }) {
   if (src) {
     return /*#__PURE__*/jsxRuntime.jsx(reactNative.Image, {
@@ -350,34 +355,43 @@ function AvatarContent({
       style: {
         width: size,
         height: size
-      }
+      },
+      accessibilityLabel: alt
     });
   }
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body-small",
+      base: base,
       variant: "bold",
-      color: light ? 'black' : 'white',
+      color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.UserIcon, {}),
-    color: light ? 'black' : 'white',
+    color: isLight ? 'black' : 'white',
     size: size / 2
   });
 }
 
 function Avatar({
   size = 40,
-  ...rest
+  base = 'body-small',
+  round,
+  light,
+  ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, { ...rest,
-    size: size,
-    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, { ...rest,
-      size: size
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatarView, {
+    $size: size,
+    $isRound: round,
+    $isLight: light,
+    children: /*#__PURE__*/jsxRuntime.jsx(AvatarContent, {
+      size: size,
+      base: base,
+      isLight: light,
+      ...props
     })
   });
 }
@@ -787,7 +801,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-const Container$6 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$7 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
@@ -807,7 +821,7 @@ function Card({
   children,
   type
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$6, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$7, {
     type: type,
     children: children
   });
@@ -995,7 +1009,7 @@ const Input = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
 }, ({
   minHeight
 }) => minHeight);
-const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$6 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "InputText__Container",
   componentId: "kitt-universal__sc-uke279-1"
 })(["margin-top:", ";margin-bottom:", ";"], ({
@@ -1069,7 +1083,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
     isDisabled: disabled,
     formState
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$6, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
       ref: ref,
       nativeID: id,
@@ -1159,7 +1173,7 @@ const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
 }) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
 }) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$4 = /*#__PURE__*/styled__default.Pressable.withConfig({
+const Container$5 = /*#__PURE__*/styled__default.Pressable.withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -1177,7 +1191,7 @@ function Radio({
   disabled = false,
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
@@ -1203,6 +1217,7 @@ function TextArea({ ...props
   const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     multiline: true,
+    textAlignVertical: "top",
     ...props,
     type: "text",
     minHeight: theme.kitt.forms.input.textAreaMinHeight
@@ -1344,7 +1359,7 @@ function FullScreenModalHeader({
   });
 }
 
-const Container$3 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$4 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], ({
@@ -1353,7 +1368,7 @@ const Container$3 = /*#__PURE__*/styled__default.View.withConfig({
 function FullScreenModal({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$3, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$4, {
     children: children
   });
 }
@@ -1383,13 +1398,15 @@ function StyleWebWrapper({
 //   };
 // }
 function withTheme(WrappedComponent) {
-  return function (props) {
+  // eslint-disable-next-line prefer-arrow-callback
+  return /*#__PURE__*/react.forwardRef(function (props, ref) {
     const theme = /*#__PURE__*/styled.useTheme();
     return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      ref: ref,
       theme: theme,
       ...props
     });
-  };
+  });
 }
 
 const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
@@ -1399,9 +1416,6 @@ const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("di
     "p1nlccvg-0": [({
       theme
     }) => theme.kitt.iconButton.scale.base.hover],
-    "p1nlccvg-1": [({
-      theme
-    }) => theme.breakpoints.min.mediumBreakpoint],
     "p1nlccvg-2": [({
       theme
     }) => theme.kitt.iconButton.scale.medium.hover],
@@ -1782,7 +1796,7 @@ function LargeLoader({
 
 const xIconSize = 14;
 const mainIconSize = 20;
-const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
+const Container$3 = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Message__Container",
   componentId: "kitt-universal__sc-c6400e-0"
 })(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], ({
@@ -1861,7 +1875,7 @@ function Message({
   insets
 }) {
   const color = getColorByType(type);
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
     type: type,
     noRadius: noRadius,
     insets: insets,
@@ -2062,6 +2076,117 @@ function Notification({
   });
 }
 
+const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "SkeletonContent__Container",
+  componentId: "kitt-universal__sc-1u3chjb-0"
+})(["background-color:", ";border-color:", ";height:100%;width:100%;"], ({
+  theme
+}) => theme.kitt.skeleton.backgroundColor, ({
+  theme
+}) => theme.kitt.skeleton.flareColor);
+const AnimatedLinearGradient = Animated__default.createAnimatedComponent(expoLinearGradient.LinearGradient);
+function SkeletonContent({
+  isLoading,
+  width
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const sharedX = Animated.useSharedValue(0);
+  react.useEffect(() => {
+    if (isLoading) {
+      sharedX.value = Animated.withRepeat(Animated.withTiming(1, {
+        duration: theme.kitt.skeleton.animationDuration,
+        easing: Animated.Easing.inOut(Animated.Easing.ease)
+      }), -1);
+    }
+  }, [sharedX, width, isLoading, theme]);
+  const linearGradientStyle = Animated.useAnimatedStyle(function () {
+    const _f = function () {
+      return {
+        transform: [{
+          translateX: Animated.interpolate(sharedX.value, [0, 1], [-width, width])
+        }]
+      };
+    };
+
+    _f._closure = {
+      interpolate: Animated.interpolate,
+      sharedX,
+      width
+    };
+    _f.asString = "function _f(){const{interpolate,sharedX,width}=jsThis._closure;{return{transform:[{translateX:interpolate(sharedX.value,[0,1],[-width,width])}]};}}";
+    _f.__workletHash = 1670955855244;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Skeleton/SkeletonContent.tsx (41:47)";
+    _f.__optimalization = 3;
+
+    global.__reanimatedWorkletInit(_f);
+
+    return _f;
+  }());
+  return /*#__PURE__*/jsxRuntime.jsx(Container$2, {
+    children: /*#__PURE__*/jsxRuntime.jsx(AnimatedLinearGradient, {
+      colors: [theme.kitt.skeleton.backgroundColor, theme.kitt.skeleton.flareColor, theme.kitt.skeleton.backgroundColor],
+      locations: [0.1, 0.5, 0.9],
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 0
+      },
+      style: [reactNative.StyleSheet.absoluteFill, linearGradientStyle]
+    })
+  });
+}
+
+function Skeleton({
+  isLoading,
+  style
+}) {
+  const [width, setWidth] = react.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
+    style: style,
+    onLayout: ({
+      nativeEvent
+    }) => setWidth(nativeEvent.layout.width),
+    children: /*#__PURE__*/jsxRuntime.jsx(SkeletonContent, {
+      isLoading: isLoading,
+      width: width
+    })
+  });
+}
+const Bar = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Bar",
+  componentId: "kitt-universal__sc-1w5cm3i-0"
+})(["width:100%;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 2, ({
+  theme
+}) => theme.kitt.spacing * 2);
+const Circle = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Circle",
+  componentId: "kitt-universal__sc-1w5cm3i-1"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 6);
+const Square = /*#__PURE__*/styled__default(Skeleton).withConfig({
+  displayName: "Skeleton__Square",
+  componentId: "kitt-universal__sc-1w5cm3i-2"
+})(["width:", "px;height:", "px;border-radius:", "px;overflow:hidden;"], ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 12, ({
+  theme
+}) => theme.kitt.spacing * 1.5);
+Skeleton.Bar = Bar;
+Skeleton.Circle = Circle;
+Skeleton.Square = Square;
+
 const Flex = /*#__PURE__*/styled__default.View.withConfig({
   shouldForwardProp: (prop, defaultValidatorFn) => !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop)
 }).withConfig({
@@ -2487,17 +2612,6 @@ const lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-const avatarLateOceanTheme = {
-  default: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette.lateOcean
-  },
-  light: {
-    color: lateOceanColorPalette.black1000,
-    backgroundColor: lateOceanColorPalette.black100
-  }
-};
-
 const colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
@@ -2520,6 +2634,16 @@ const colorsLateOceanTheme = {
   }
 };
 
+const avatar = {
+  borderRadius: '10px',
+  default: {
+    backgroundColor: colorsLateOceanTheme.primary
+  },
+  light: {
+    backgroundColor: lateOceanColorPalette.black100
+  }
+};
+
 const buttonLateOceanTheme = {
   borderRadius: '30px',
   borderWidth: {
@@ -2746,6 +2870,12 @@ const shadowsLateOceanTheme = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
+const skeletonTheme = {
+  backgroundColor: lateOceanColorPalette.black100,
+  flareColor: lateOceanColorPalette.black200,
+  animationDuration: 1000
+};
+
 const tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
@@ -2797,18 +2927,16 @@ const tooltip = {
 };
 
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-
 const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
   baseAndSmall: {
     fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
   },
   mediumAndWide: {
     fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(lineHeightMultiplier, baseAndSmallFontSize)}px`
+    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
   }
 });
-
 const typographyLateOceanTheme = {
   colors: {
     black: lateOceanColorPalette.black1000,
@@ -2890,7 +3018,7 @@ const breakpoints = {
     wideBreakpoint: 'max-width: 1279px'
   }
 }; // eslint-disable-next-line unicorn/expiring-todo-comments
-// TODO : seperate brand co lor usage definition from proper theme definition and add t ypings - https://ornikar.atlassian.net/browse/CME-156
+// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 
 const theme = {
   spacing: 4,
@@ -2898,7 +3026,7 @@ const theme = {
   palettes: {
     lateOcean: lateOceanColorPalette
   },
-  avatar: avatarLateOceanTheme,
+  avatar,
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
@@ -2909,7 +3037,9 @@ const theme = {
   fullScreenModal: fullScreenModalLateOceanTheme,
   iconButton,
   listItem: listItemLateOceanTheme,
-  tooltip
+  tooltip,
+  skeleton: skeletonTheme,
+  breakpoints
 };
 
 function Title({
@@ -3386,12 +3516,18 @@ function useKittTheme() {
   return react.useMemo(() => {
     return {
       kitt: theme,
-      responsive: createWindowSizeHelper(dimensions),
-      breakpoints
+      responsive: createWindowSizeHelper(dimensions)
     };
   }, [dimensions]);
 }
 
+const hex2rgba = (hex, alpha = 1) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 function KittThemeProvider({
   children
 }) {
@@ -3452,6 +3588,7 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Radio = Radio;
 exports.Section = DeprecatedSection;
+exports.Skeleton = Skeleton;
 exports.Story = Story;
 exports.StoryBlock = StoryBlock;
 exports.StoryContainer = StoryContainer;
@@ -3459,6 +3596,7 @@ exports.StoryDecorator = StoryDecorator;
 exports.StoryGrid = StoryGrid;
 exports.StorySection = StorySection;
 exports.StoryTitle = StoryTitle;
+exports.StyleWebWrapper = StyleWebWrapper;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimePicker = TimePicker;
@@ -3468,12 +3606,14 @@ exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.createWindowSizeHelper = createWindowSizeHelper;
+exports.hex2rgba = hex2rgba;
 exports.matchWindowSize = matchWindowSize;
 exports.styledTextInputMixin = styledTextInputMixin;
 exports.theme = theme;
 exports.useKittTheme = useKittTheme;
 exports.useMatchWindowSize = useMatchWindowSize;
 exports.useStoryBlockColor = useStoryBlockColor;
+exports.withTheme = withTheme;
 Object.keys(kittIcons).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = kittIcons[k];
 });