@ornikar/kitt-universal 7.3.0 → 7.6.0

package/dist/index-browser-all.es.js

@@ -5,7 +5,7 @@ export * from '@ornikar/kitt-icons';
 import { useWindowDimensions, Platform, Image, Linking, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, View, Animated as Animated$1, Easing } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { css, useTheme, ThemeProvider } from 'styled-components/native';
-import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
+import React, { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useAnimatedProps, withDelay, withTiming, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -17,6 +17,7 @@ import { styled as styled$1 } from '@linaria/react';
 import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
+import { Picker as Picker$1 } from '@react-native-picker/picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useFloating, offset, shift, flip } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
@@ -103,7 +104,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color", "textAlign"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -134,19 +135,23 @@ function getTypographyTypeConfig(type, theme) {
 }
 var StyledTypography = /*#__PURE__*/styled.Text.withConfig({
   displayName: "Typography__StyledTypography"
-})(["", " ", ""], function (_ref) {
-  var theme = _ref.theme,
-      $isHeader = _ref.$isHeader,
-      $typeForCurrentWindowSize = _ref.$typeForCurrentWindowSize,
-      $variant = _ref.$variant;
+})(["", ";", " ", ""], function (_ref) {
+  var $textAlign = _ref.$textAlign;
+  if (!$textAlign) return undefined;
+  return css(["text-align:", ";"], $textAlign);
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isHeader = _ref2.$isHeader,
+      $typeForCurrentWindowSize = _ref2.$typeForCurrentWindowSize,
+      $variant = _ref2.$variant;
   var _theme$kitt$typograph = theme.kitt.typography.types,
       headers = _theme$kitt$typograph.headers,
       bodies = _theme$kitt$typograph.bodies;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "\n      /* type */\n      ".concat(!$typeForCurrentWindowSize ? '' : "\n  font-family: ".concat($isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], ";\n  font-size: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, "px;\n  line-height: ").concat($isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight, "px;\n    "), "\n\n    /* variant */\n    font-weight: ").concat($isHeader ? headers.fontWeight : bodies.fontWeight[$variant], ";\n    font-style: ").concat($isHeader ? headers.fontStyle : bodies.fontStyle[$variant], ";\n  ");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      $color = _ref2.$color;
+  return css(["", " font-weight:", ";font-style:", ";"], !$typeForCurrentWindowSize ? '' : css(["font-family:", ";font-size:", "px;line-height:", "px;"], $isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant], $isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize, $isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight), $isHeader ? headers.fontWeight : bodies.fontWeight[$variant], $isHeader ? headers.fontStyle : bodies.fontStyle[$variant]);
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      $color = _ref3.$color;
   if (!$color) return '';
   return css(["color:", ";text-decoration-color:", ";"], theme.kitt.typography.colors[$color], theme.kitt.typography.colors[$color]);
 });
@@ -159,9 +164,9 @@ function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   if (small && width >= KittBreakpoints.SMALL) return small;
   return base;
 }
-function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, _ref3) {
-  var base = _ref3.base,
-      color = _ref3.color;
+function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypographyAncestor, _ref4) {
+  var base = _ref4.base,
+      color = _ref4.color;
   // return the props set or undefined. In case of undefined, the value will be inherited from its parents.
   if (hasTypographyAncestor) return {
     base: base,
@@ -172,15 +177,16 @@ function getTypographyInheritedOrDefaultValuesBasedOnExistingAncestors(hasTypogr
     color: color !== null && color !== void 0 ? color : 'black'
   };
 }
-function Typography(_ref4) {
-  var accessibilityRole = _ref4.accessibilityRole,
-      base = _ref4.base,
-      small = _ref4.small,
-      medium = _ref4.medium,
-      large = _ref4.large,
-      variant = _ref4.variant,
-      color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$h);
+function Typography(_ref5) {
+  var accessibilityRole = _ref5.accessibilityRole,
+      base = _ref5.base,
+      small = _ref5.small,
+      medium = _ref5.medium,
+      large = _ref5.large,
+      variant = _ref5.variant,
+      color = _ref5.color,
+      textAlign = _ref5.textAlign,
+      otherProps = _objectWithoutProperties(_ref5, _excluded$h);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -195,21 +201,21 @@ function Typography(_ref4) {
   var typeForCurrentWindowSize = useTypographyTypeForCurrentWindowSize(baseOrDefaultToBody, small, medium, large);
   var isHeader = isTypographyHeader(typeForCurrentWindowSize, isHeaderTypographyInContext);
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
-  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
-    value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread({
-      $color: colorOrDefaultToBlack,
-      $isHeader: isHeader,
-      $typeForCurrentWindowSize: typeForCurrentWindowSize,
-      $variant: nonNullableVariant,
-      accessibilityRole: accessibilityRole || undefined
-    }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({
+
+  var sharedProps = _objectSpread({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
-    accessibilityRole: accessibilityRole || undefined
-  }, otherProps));
+    accessibilityRole: accessibilityRole || undefined,
+    $textAlign: textAlign
+  }, otherProps);
+
+  var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
+    value: isHeader,
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      $typeForCurrentWindowSize: typeForCurrentWindowSize
+    }, otherProps))
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread({}, sharedProps));
   return color ? /*#__PURE__*/jsx(TypographyColorContext.Provider, {
     value: color,
     children: content
@@ -1363,6 +1369,30 @@ var pageLoader = {
   }
 };
 
+var picker = {
+  ios: {
+    "default": _objectSpread(_objectSpread({
+      fontFamily: typography.types.bodies.fontFamily.regular
+    }, typography.types.bodies.configs.body.baseAndSmall), {}, {
+      fontSize: 16,
+      color: typography.colors['black-light']
+    }),
+    selected: {
+      color: typography.colors.primary
+    }
+  },
+  android: {
+    padding: '12px 24px',
+    "default": {
+      backgroundColor: colors.transparent
+    },
+    selected: {
+      backgroundColor: colors.primary,
+      color: typography.colors.white
+    }
+  }
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1462,6 +1492,7 @@ var theme = {
   iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
+  picker: picker,
   shadows: shadows,
   skeleton: skeleton,
   tag: tag,
@@ -2628,6 +2659,7 @@ function InputPassword(_ref) {
     autoCorrect: false,
     secureTextEntry: !isVisible,
     right: right || /*#__PURE__*/jsx(InputPressable, {
+      hitSlop: 20,
       accessibilityRole: "button",
       onPress: function onPress() {
         return setIsVisible(function (prev) {
@@ -3500,6 +3532,107 @@ function PageLoader() {
   });
 }
 
+var ContainerPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "PickerItem__ContainerPressable"
+})(["padding:", ";background-color:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.picker.android.padding;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isSelected = _ref2.$isSelected;
+  return $isSelected ? theme.kitt.picker.android.selected.backgroundColor : theme.kitt.picker.android["default"].backgroundColor;
+}); // This item is for Android only, iOS uses its own implementation and web is not supported yet
+
+function PickerItem(_ref3) {
+  var label = _ref3.label,
+      value = _ref3.value,
+      isSelected = _ref3.isSelected,
+      onPress = _ref3.onPress;
+  return /*#__PURE__*/jsx(ContainerPressable, {
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: isSelected
+    },
+    $isSelected: isSelected,
+    onPress: onPress ? function () {
+      return onPress(value);
+    } : undefined,
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body",
+      color: isSelected ? 'white' : undefined,
+      children: label
+    })
+  });
+}
+
+function Picker(_ref) {
+  var children = _ref.children,
+      isVisible = _ref.isVisible,
+      title = _ref.title,
+      initialValue = _ref.initialValue,
+      validateButtonLabel = _ref.validateButtonLabel,
+      testID = _ref.testID,
+      onValueSelected = _ref.onValueSelected,
+      onClose = _ref.onClose;
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return /*#__PURE__*/jsxs(Modal, {
+    visible: isVisible,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Modal.Header, {
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: "body",
+        variant: "bold",
+        children: title
+      })
+    }), /*#__PURE__*/jsx(View, {
+      children: Platform.OS === 'ios' ? /*#__PURE__*/jsx(Picker$1, {
+        testID: testID,
+        selectedValue: value,
+        itemStyle: theme.picker.ios["default"],
+        onValueChange: function onValueChange(itemValue) {
+          return setValue(itemValue);
+        },
+        children: React.Children.map(children, function (child) {
+          var item = child; // iOS Picker doesn't support a custom Item component, we need to override its props manually for the selected one
+
+          return /*#__PURE__*/cloneElement(item, {
+            color: item.props.value === value ? theme.picker.ios.selected.color : undefined
+          });
+        })
+      }) : /*#__PURE__*/jsx(ScrollView, {
+        testID: testID,
+        children: React.Children.map(children, function (child) {
+          var item = child;
+          return /*#__PURE__*/cloneElement(item, {
+            onPress: function onPress(newValue) {
+              return setValue(newValue);
+            },
+            isSelected: item.props.value === value
+          });
+        })
+      })
+    }), /*#__PURE__*/jsx(Modal.Footer, {
+      children: /*#__PURE__*/jsx(Button, {
+        stretch: true,
+        type: "primary",
+        onPress: function handleValueSelected() {
+          onValueSelected(value);
+          onClose();
+        },
+        children: validateButtonLabel || /*#__PURE__*/jsx(FormattedMessage, {
+          id: "kitt-universal.Picker.validate"
+        })
+      })
+    })]
+  });
+}
+Picker.Item = PickerItem;
+
 var Container$2 = /*#__PURE__*/styled.View.withConfig({
   displayName: "SkeletonContent__Container"
 })(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
@@ -4472,5 +4605,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Picker, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map