@ornikar/kitt-universal 9.12.2 → 9.14.0

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

@@ -2,8 +2,8 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Text as Text$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, Input, NativeBaseProvider, extendTheme } from 'native-base';
 import _extends from '@babel/runtime/helpers/extends';
-import React, { forwardRef, useContext, createContext, cloneElement, useRef, useEffect, useState, Children, useMemo, Fragment as Fragment$1 } from 'react';
-import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Image, StyleSheet, View as View$2, ScrollView as ScrollView$2, Pressable as Pressable$2, Modal as Modal$1, Linking, Text as Text$2 } from 'react-native';
+import React, { forwardRef, useContext, createContext, cloneElement, useRef, useEffect, useState, useMemo, Children, Fragment as Fragment$1 } from 'react';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Image, View as View$2, StyleSheet, ScrollView as ScrollView$2, Pressable as Pressable$2, Modal as Modal$1, Linking, Text as Text$2 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useDerivedValue, withTiming, Easing as Easing$1, runOnJS, useAnimatedProps, withDelay, withRepeat, interpolate } from 'react-native-reanimated';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
@@ -13,12 +13,13 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { ArcIcon, UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
+import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { parse } from 'twemoji-parser';
 import { openBrowserAsync } from 'expo-web-browser';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
 import { styled as styled$1 } from '@linaria/react';
-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';
@@ -1045,6 +1046,95 @@ function Avatar(_ref6) {
   });
 }
 
+var BottomSheetContainerView = /*#__PURE__*/styled(View$2).withConfig({
+  displayName: "BottomSheet__BottomSheetContainerView"
+})(["padding:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return "".concat(theme.kitt.bottomSheet.container.padding, "px");
+});
+
+function BottomSheetComp(_ref2, ref) {
+  var Content = _ref2.children,
+      _ref2$hasScrollView = _ref2.hasScrollView,
+      hasScrollView = _ref2$hasScrollView === void 0 ? false : _ref2$hasScrollView,
+      _ref2$hasBackdrop = _ref2.hasBackdrop,
+      hasBackdrop = _ref2$hasBackdrop === void 0 ? true : _ref2$hasBackdrop,
+      _ref2$hasHandle = _ref2.hasHandle,
+      hasHandle = _ref2$hasHandle === void 0 ? true : _ref2$hasHandle;
+  var Wrapper = useMemo(function () {
+    return hasScrollView ? BottomSheetScrollView : BottomSheetView;
+  }, [hasScrollView]);
+  var theme = /*#__PURE__*/useTheme();
+  var initialSnapPoints = useMemo(function () {
+    return ['CONTENT_HEIGHT'];
+  }, []);
+
+  var _useBottomSheetDynami = useBottomSheetDynamicSnapPoints(initialSnapPoints),
+      animatedHandleHeight = _useBottomSheetDynami.animatedHandleHeight,
+      animatedSnapPoints = _useBottomSheetDynami.animatedSnapPoints,
+      animatedContentHeight = _useBottomSheetDynami.animatedContentHeight,
+      handleContentLayout = _useBottomSheetDynami.handleContentLayout;
+
+  return /*#__PURE__*/jsx(BottomSheetModal, {
+    ref: ref,
+    enablePanDownToClose: true,
+    snapPoints: animatedSnapPoints,
+    index: 0,
+    handleHeight: animatedHandleHeight,
+    handleIndicatorStyle: {
+      width: 40,
+      height: 4,
+      borderRadius: 4,
+      backgroundColor: theme.kitt.bottomSheet.handle.backgroundColor
+    },
+    handleComponent: function handleComponent(props) {
+      return hasHandle ? /*#__PURE__*/jsx(BottomSheetHandle, _objectSpread({}, props)) : null;
+    },
+    backdropComponent: function backdropComponent(props) {
+      return hasBackdrop ? /*#__PURE__*/jsx(BottomSheetBackdrop, _objectSpread(_objectSpread({}, props), {}, {
+        opacity: 0.25,
+        appearsOnIndex: 0,
+        disappearsOnIndex: -1
+      })) : null;
+    },
+    contentHeight: animatedContentHeight,
+    children: function children(_ref3) {
+      var data = _ref3.data;
+      return /*#__PURE__*/jsx(SafeAreaView, {
+        edges: ['bottom'],
+        onLayout: handleContentLayout,
+        children: /*#__PURE__*/jsx(Wrapper, {
+          children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, data)) : Content
+        })
+      });
+    }
+  });
+}
+
+var BottomSheet = /*#__PURE__*/forwardRef(BottomSheetComp);
+BottomSheet.View = BottomSheetContainerView;
+
+function useBottomSheet() {
+  var ref = useRef(null);
+  return ref;
+}
+
+function useStaticBottomSheet(Content) {
+  var bottomSheetRef = useRef(null);
+  var BottomSheetMemoized = useMemo(function () {
+    return function (props) {
+      return /*#__PURE__*/jsx(BottomSheet, _objectSpread(_objectSpread({}, props), {}, {
+        ref: bottomSheetRef,
+        children: Content
+      }));
+    };
+  }, [Content]);
+  return {
+    bottomSheetRef: bottomSheetRef,
+    BottomSheet: BottomSheetMemoized
+  };
+}
+
 var Container$5 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
 })(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -2082,6 +2172,17 @@ var avatar = {
   }
 };
 
+var spacing = 4;
+
+var bottomSheet = {
+  container: {
+    padding: spacing * 4
+  },
+  handle: {
+    backgroundColor: lateOceanColorPalette.black200
+  }
+};
+
 var button = {
   borderRadius: 30,
   borderWidth: {
@@ -2332,7 +2433,8 @@ var typography = {
     'primary-light': colors.primaryLight,
     accent: colors.accent,
     success: colors.success,
-    danger: colors.danger
+    danger: colors.danger,
+    warning: colors.warning
   },
   types: {
     headers: {
@@ -2511,8 +2613,6 @@ var fullScreenModal = {
   }
 };
 
-var spacing = 4;
-
 var highlight = {
   borderRadius: {
     base: spacing * 5
@@ -2678,6 +2778,18 @@ var tag = {
       borderWidth: 1,
       borderColor: colors.danger
     }
+  },
+  warn: {
+    fill: {
+      backgroundColor: colors.warning,
+      borderWidth: 0,
+      borderColor: colors.transparent
+    },
+    outline: {
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.warning
+    }
   }
 };
 
@@ -2722,6 +2834,7 @@ var theme = {
   avatar: avatar,
   breakpoints: breakpoints,
   button: button,
+  bottomSheet: bottomSheet,
   card: card,
   choices: choices,
   dialogModal: dialogModal,
@@ -5956,6 +6069,11 @@ var getLabelColor = function (type, variant) {
         return variant === 'outline' ? 'danger' : 'black';
       }
 
+    case 'warn':
+      {
+        return variant === 'outline' ? 'warning' : 'black';
+      }
+
     case 'primary':
       {
         return 'primary';
@@ -6511,5 +6629,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Actions, Avatar, Button, Card, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Highlight, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Actions, Avatar, BottomSheet, Button, Card, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Highlight, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createChoicesComponent, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useBottomSheet, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map