@ornikar/kitt-universal 23.2.7 → 23.4.0

package/dist/index.es.web.js

@@ -19,6 +19,8 @@ export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from 'twemoji-parser';
 import { CaretUpFillIcon, CaretDownFillIcon, EyeClosedRegularIcon, EyeRegularIcon, CaretDownRegularIcon, XRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import Downshift, { useSelect } from 'downshift';
+import { getDocumentAsync } from 'expo-document-picker';
+import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
@@ -1655,57 +1657,51 @@ var skeleton$1 = {
 };
 
 var tag = {
-  borderRadius: 10,
-  padding: '2px 12px',
-  verticalPadding: 2,
-  horizontalPadding: 12,
-  primary: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.primary
-    }
+  borderRadius: 16,
+  icon: {
+    small: 16,
+    medium: 16,
+    large: 20
   },
-  "default": {
-    fill: {
-      backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: 0,
-      borderColor: colors.transparent
+  withIcon: {
+    small: {
+      paddingLeft: 2,
+      paddingRight: 8,
+      height: 20
     },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.black
-    }
-  },
-  danger: {
-    fill: {
-      backgroundColor: colors.danger,
-      borderWidth: 0,
-      borderColor: colors.transparent
+    medium: {
+      paddingLeft: 4,
+      paddingRight: 8,
+      height: 24
     },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.danger
+    large: {
+      paddingLeft: 6,
+      paddingRight: 8,
+      height: 32
     }
   },
-  warn: {
-    fill: {
-      backgroundColor: colors.warning,
-      borderWidth: 0,
-      borderColor: colors.transparent
+  withoutIcon: {
+    small: {
+      paddingLeft: 8,
+      paddingRight: 8,
+      height: 20
     },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.warning
+    medium: {
+      paddingLeft: 8,
+      paddingRight: 8,
+      height: 22
+    },
+    large: {
+      paddingLeft: 8,
+      paddingRight: 8,
+      height: 28
     }
+  },
+  fill: {
+    borderWidth: 0
+  },
+  outline: {
+    borderWidth: 1
   }
 };
 
@@ -4814,6 +4810,107 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
+function DocumentPicker(_ref) {
+  var onDocumentUpload = _ref.onDocumentUpload,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    documentPickerOptions = _ref.documentPickerOptions;
+  var childElement = Children.only(children);
+  var handlePickDocument = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _childElement$props$o, _childElement$props;
+      var result;
+      return _regeneratorRuntime().wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!disabled) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
+            _context.next = 5;
+            return getDocumentAsync(_objectSpread(_objectSpread({}, documentPickerOptions), {}, {
+              multiple: false
+            }));
+          case 5:
+            result = _context.sent;
+            if (!result.canceled && result.assets[0].file) {
+              onDocumentUpload(result.assets[0].file);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function () {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/cloneElement(childElement, {
+    // ensure that the press event is not prevented by Button component
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    onPress: handlePickDocument,
+    disabled: disabled
+  });
+}
+
+function FilePicker() {
+  throw new Error('FilePicker only works on native');
+}
+
+function ImagePicker(_ref) {
+  var onImageSelected = _ref.onImageSelected,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    imagePickerOptions = _ref.imagePickerOptions;
+  var childElement = Children.only(children);
+  var handlePickImage = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _childElement$props$o, _childElement$props;
+      var result;
+      return _regeneratorRuntime().wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!disabled) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
+
+            // No permissions request is necessary for launching the image library
+            _context.next = 5;
+            return launchImageLibraryAsync(_objectSpread(_objectSpread({}, imagePickerOptions), {}, {
+              allowsMultipleSelection: false
+            }));
+          case 5:
+            result = _context.sent;
+            if (!result.canceled) {
+              onImageSelected(result.assets[0]);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function () {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsx(View, {
+    children: /*#__PURE__*/cloneElement(childElement, {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onPress: handlePickImage,
+      disabled: disabled
+    })
+  });
+}
+
 var GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
 function GoogleMapsApiKeyProvider(_ref) {
   var children = _ref.children,
@@ -7202,48 +7299,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
-        tag: {
-          primary: {
-            fill: {
-              backgroundColor: theme.tag.primary.fill.backgroundColor,
-              borderColor: theme.tag.primary.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.primary.outline.backgroundColor,
-              borderColor: theme.tag.primary.outline.borderColor
-            }
-          },
-          "default": {
-            fill: {
-              backgroundColor: theme.tag["default"].fill.backgroundColor,
-              borderColor: theme.tag["default"].fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag["default"].outline.backgroundColor,
-              borderColor: theme.tag["default"].outline.borderColor
-            }
-          },
-          danger: {
-            fill: {
-              backgroundColor: theme.tag.danger.fill.backgroundColor,
-              borderColor: theme.tag.danger.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.danger.outline.backgroundColor,
-              borderColor: theme.tag.danger.outline.borderColor
-            }
-          },
-          warn: {
-            fill: {
-              backgroundColor: theme.tag.warn.fill.backgroundColor,
-              borderColor: theme.tag.warn.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.warn.outline.backgroundColor,
-              borderColor: theme.tag.warn.outline.borderColor
-            }
-          }
-        },
         tooltip: {
           backgroundColor: theme.tooltip.backgroundColor
         },
@@ -7731,37 +7786,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderWidth: theme.listItem.borderWidth
         },
         tag: {
-          primary: {
-            fill: {
-              borderWidth: theme.tag.primary.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.primary.outline.borderWidth
-            }
-          },
-          "default": {
-            fill: {
-              borderWidth: theme.tag["default"].fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag["default"].outline.borderWidth
-            }
+          fill: {
+            borderWidth: theme.tag.fill.borderWidth
           },
-          danger: {
-            fill: {
-              borderWidth: theme.tag.danger.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.danger.outline.borderWidth
-            }
-          },
-          warn: {
-            fill: {
-              borderWidth: theme.tag.warn.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.warn.outline.borderWidth
-            }
+          outline: {
+            borderWidth: theme.tag.outline.borderWidth
           }
         }
       },
@@ -7856,6 +7885,39 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         pageLoader: {
           size: theme.pageLoader.size
         },
+        tag: {
+          small: {
+            iconSize: theme.tag.icon.small
+          },
+          medium: {
+            iconSize: theme.tag.icon.medium
+          },
+          large: {
+            iconSize: theme.tag.icon.large
+          },
+          withIcon: {
+            small: {
+              height: theme.tag.withIcon.small.height
+            },
+            medium: {
+              height: theme.tag.withIcon.medium.height
+            },
+            large: {
+              height: theme.tag.withIcon.large.height
+            }
+          },
+          withoutIcon: {
+            small: {
+              height: theme.tag.withoutIcon.small.height
+            },
+            medium: {
+              height: theme.tag.withoutIcon.medium.height
+            },
+            large: {
+              height: theme.tag.withoutIcon.large.height
+            }
+          }
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -7945,8 +8007,34 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           horizontalPadding: theme.listItem.horizontalPadding
         },
         tag: {
-          verticalPadding: theme.tag.verticalPadding,
-          horizontalPadding: theme.tag.horizontalPadding
+          withoutIcon: {
+            small: {
+              paddingLeft: theme.tag.withoutIcon.small.paddingLeft,
+              paddingRight: theme.tag.withoutIcon.small.paddingRight
+            },
+            medium: {
+              paddingLeft: theme.tag.withoutIcon.medium.paddingLeft,
+              paddingRight: theme.tag.withoutIcon.medium.paddingRight
+            },
+            large: {
+              paddingLeft: theme.tag.withoutIcon.large.paddingLeft,
+              paddingRight: theme.tag.withoutIcon.large.paddingRight
+            }
+          },
+          withIcon: {
+            small: {
+              paddingLeft: theme.tag.withIcon.small.paddingLeft,
+              paddingRight: theme.tag.withIcon.small.paddingRight
+            },
+            medium: {
+              paddingLeft: theme.tag.withIcon.medium.paddingLeft,
+              paddingRight: theme.tag.withIcon.medium.paddingRight
+            },
+            large: {
+              paddingLeft: theme.tag.withIcon.large.paddingLeft,
+              paddingRight: theme.tag.withIcon.large.paddingRight
+            }
+          }
         },
         tooltip: {
           horizontalPadding: theme.tooltip.horizontalPadding,
@@ -9867,49 +9955,69 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var getLabelColor = function (type, variant) {
+function useKittTheme() {
+  return useMemo(function () {
+    return {
+      kitt: theme
+    };
+  }, []);
+}
+
+var getTypography = function (size) {
+  switch (size) {
+    case 'small':
+      return 'body-xs';
+    case 'medium':
+      return 'body-s';
+    case 'large':
+    default:
+      return 'body-m';
+  }
+};
+var typeToColor = function (color, type) {
+  if (color) return color;
   switch (type) {
-    case 'danger':
-      {
-        return variant === 'outline' ? 'danger' : 'black';
-      }
-    case 'warn':
-      {
-        return variant === 'outline' ? 'warning' : 'black';
-      }
     case 'primary':
-      {
-        return 'primary';
-      }
+      return 'violine';
+    case 'warn':
+      return 'sun';
+    case 'danger':
+      return 'coral';
     case 'default':
-      {
-        return 'black';
-      }
     default:
-      {
-        return 'black';
-      }
+      return 'eggshell';
   }
 };
 function Tag(_ref) {
   var label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+    icon = _ref.icon,
+    color = _ref.color,
+    type = _ref.type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
-  return /*#__PURE__*/jsx(View, {
+  var kittTheme = useKittTheme();
+  var tagColor = typeToColor(color, type);
+  return /*#__PURE__*/jsxs(HStack, {
     alignSelf: "flex-start",
     borderRadius: "kitt.tag.borderRadius",
-    paddingX: "kitt.tag.horizontalPadding",
-    paddingY: "kitt.tag.verticalPadding",
-    backgroundColor: "kitt.tag.".concat(type, ".").concat(variant, ".backgroundColor"),
-    borderColor: "kitt.tag.".concat(type, ".").concat(variant, ".borderColor"),
-    borderWidth: "kitt.tag.".concat(type, ".").concat(variant, ".borderWidth"),
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
+    height: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".height"),
+    paddingLeft: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".paddingLeft"),
+    paddingRight: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".paddingRight"),
+    backgroundColor: variant === 'fill' ? kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".4")] : 'kitt.transparent',
+    borderColor: kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".6")],
+    borderWidth: "kitt.tag.".concat(variant, ".borderWidth"),
+    space: "kitt.1",
+    alignItems: "center",
+    children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
+      icon: icon,
+      size: "kitt.tag.".concat(size, ".iconSize")
+    }) : null, /*#__PURE__*/jsx(Typography.Text, {
+      base: getTypography(size),
+      color: "black",
       children: label
-    })
+    })]
   });
 }
 
@@ -10458,14 +10566,6 @@ function TypographyLink(_ref) {
   });
 }
 
-function useKittTheme() {
-  return useMemo(function () {
-    return {
-      kitt: theme
-    };
-  }, []);
-}
-
 function KittThemeProvider(_ref) {
   var isSSR = _ref.isSSR,
     children = _ref.children,
@@ -10690,5 +10790,5 @@ function VerticalSteps(_ref) {
 }
 VerticalSteps.Step = ExternalStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.web.js.map