@ornikar/kitt-universal 9.8.0 → 9.9.0

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

@@ -1,9 +1,9 @@
 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, NativeBaseProvider, extendTheme } from 'native-base';
+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, Linking, Pressable as Pressable$2, Modal as Modal$1, Text as Text$2, TextInput } from 'react-native';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, Image, StyleSheet, View as View$2, ScrollView as ScrollView$2, Linking, Pressable as Pressable$2, Modal as Modal$1, Text as Text$2 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useDerivedValue, withTiming, useAnimatedProps, withDelay, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
@@ -1613,6 +1613,7 @@ var colors = {
   hover: lateOceanColorPalette.black100,
   white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackLight: lateOceanColorPalette.black555,
   blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
@@ -1913,34 +1914,34 @@ var inputStatesStyle = {
   "default": {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   },
   pending: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   },
   valid: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
-    color: 'black'
+    color: colors.black
   },
   hover: {
     borderColor: lateOceanColorPalette.black200,
-    color: 'black'
+    color: colors.black
   },
   focus: {
     borderColor: colors.primary,
-    color: 'black'
+    color: colors.black
   },
   disabled: {
     backgroundColor: colors.disabled,
     borderColor: colors.separator,
-    color: 'black-light'
+    color: colors.blackLight
   },
   invalid: {
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   }
 };
 var input = {
@@ -1954,6 +1955,9 @@ var input = {
   icon: {
     size: 20
   },
+  rightContainer: {
+    padding: 10
+  },
   padding: {
     horizontal: 16,
     vertical: 5
@@ -2370,6 +2374,7 @@ function Checkbox(_ref6) {
   });
 }
 
+/** @deprecated use native-base instead */
 function getInputUIState(_ref) {
   var isFocused = _ref.isFocused,
       isDisabled = _ref.isDisabled,
@@ -2380,6 +2385,7 @@ function getInputUIState(_ref) {
   return 'default';
 }
 
+/** @deprecated this mixin is not SSR compatible */
 var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,
       $state = _ref.$state;
@@ -2401,7 +2407,7 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
 }, function (_ref6) {
   var theme = _ref6.theme,
       $state = _ref6.$state;
-  return theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color];
+  return theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states["default"].color;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
@@ -3124,97 +3130,65 @@ var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputTextContainer"
 })(["position:relative;"]);
 
-var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
-var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
-  displayName: "InputText__StyledTextInput"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
-  var theme = _ref.theme,
-      multiline = _ref.multiline;
-  if (!multiline && Platform.OS !== 'web') return "0 ".concat(theme.kitt.forms.input.padding.horizontal, "px");
-  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      multiline = _ref2.multiline;
-  var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline; // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
-  // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
-
-  if (shouldHandleSingleLineOnIOS) {
-    return 0;
-  }
-
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      _ref3$$minHeight = _ref3.$minHeight,
-      $minHeight = _ref3$$minHeight === void 0 ? theme.kitt.forms.input.minHeight : _ref3$$minHeight;
-  return $minHeight;
-});
-var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputText__RightInputContainer"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
-var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var id = _ref4.id,
-      right = _ref4.right,
-      minHeight = _ref4.minHeight,
-      formState = _ref4.state,
-      internalForceState = _ref4.internalForceState,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _ref4$autoCorrect = _ref4.autoCorrect,
-      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
-      _ref4$textContentType = _ref4.textContentType,
-      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
-      _ref4$autoComplete = _ref4.autoComplete,
-      autoComplete = _ref4$autoComplete === void 0 ? 'off' : _ref4$autoComplete,
-      _ref4$keyboardType = _ref4.keyboardType,
-      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
-      multiline = _ref4.multiline,
-      onSubmitEditing = _ref4.onSubmitEditing,
-      _onFocus = _ref4.onFocus,
-      _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$9);
+var _excluded$9 = ["id", "right", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
+var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      right = _ref.right;
+      _ref.state;
+      var internalForceState = _ref.internalForceState,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$autoCorrect = _ref.autoCorrect,
+      autoCorrect = _ref$autoCorrect === void 0 ? true : _ref$autoCorrect,
+      _ref$textContentType = _ref.textContentType,
+      textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      _ref$keyboardType = _ref.keyboardType,
+      keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
+      multiline = _ref.multiline,
+      onSubmitEditing = _ref.onSubmitEditing;
+      _ref.onFocus;
+      _ref.onBlur;
+      var props = _objectWithoutProperties(_ref, _excluded$9);
 
   var theme = /*#__PURE__*/useTheme();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var state = internalForceState || getInputUIState({
-    isFocused: isFocused,
-    isDisabled: disabled,
-    formState: formState
+  var fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
   });
+  var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
   return /*#__PURE__*/jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
       ref: ref,
       multiline: multiline,
       nativeID: id,
-      editable: !disabled,
+      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
       keyboardType: keyboardType,
       autoComplete: autoComplete,
       autoCorrect: autoCorrect,
-      $minHeight: minHeight,
       textContentType: textContentType,
-      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
-      selectionColor: theme.kitt.forms.input.color.selection
+      fontSize: fontSizeForNativeBase,
+      lineHeight: // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && Platform.OS !== 'web' ? 0 : undefined
     }, props), {}, {
-      $state: state,
-      onFocus: function onFocus(e) {
-        setIsFocused(true);
-        if (_onFocus) _onFocus(e);
-      },
-      onBlur: function onBlur(e) {
-        setIsFocused(false);
-        if (_onBlur) _onBlur(e);
-      },
+      variant: "outline",
       onSubmitEditing: multiline ? function () {
         return null;
       } : onSubmitEditing
-    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
+    })), right ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
       children: right
     }) : null]
   });
@@ -4133,6 +4107,78 @@ var createKittNativeBaseCustomTheme = function (theme) {
       bodies: theme.typography.types.bodies.fontFamily
     },
     components: {
+      Input: {
+        baseStyle: {
+          width: '100%',
+          minHeight: theme.forms.input.minHeight,
+          py: theme.forms.input.padding.vertical,
+          px: theme.forms.input.padding.horizontal,
+          borderRadius: theme.forms.input.borderRadius,
+          _disabled: {
+            opacity: 1 // override default native-base opacity
+
+          },
+          _light: {
+            color: theme.forms.input.states["default"].color,
+            placeholderTextColor: theme.forms.input.color.placeholder,
+            borderColor: theme.forms.input.states["default"].borderColor,
+            bg: theme.forms.input.states["default"].backgroundColor,
+            _hover: {
+              borderColor: theme.forms.input.states.hover.borderColor,
+              color: theme.forms.input.states.hover.color,
+              _focus: {
+                borderColor: theme.forms.input.states.focus.borderColor,
+                color: theme.forms.input.states.focus.color
+              }
+            },
+            _focus: {
+              borderColor: theme.forms.input.states.focus.borderColor,
+              color: theme.forms.input.states.focus.color,
+              _hover: {
+                borderColor: theme.forms.input.states.focus.borderColor,
+                color: theme.forms.input.states.focus.color
+              },
+              _stack: {
+                style: {
+                  outlineWidth: 0
+                }
+              }
+            },
+            _invalid: {
+              borderColor: theme.forms.input.states.invalid.borderColor,
+              color: theme.forms.input.states.invalid.color,
+              _hover: {
+                borderColor: theme.forms.input.states.hover.borderColor,
+                color: theme.forms.input.states.hover.color
+              }
+            },
+            _ios: {
+              selectionColor: theme.forms.input.color.selection
+            },
+            _android: {
+              selectionColor: theme.forms.input.color.selection
+            },
+            _disabled: {
+              placeholderTextColor: theme.forms.input.color.placeholder,
+              color: theme.forms.input.states.disabled.color,
+              borderColor: theme.forms.input.states.disabled.borderColor,
+              bg: theme.forms.input.states.disabled.backgroundColor
+            }
+          }
+        },
+        variants: {
+          outline: {
+            borderWidth: theme.forms.input.borderWidth,
+            _focus: {
+              bg: theme.forms.input.states["default"].backgroundColor
+            }
+          },
+          underlined: {},
+          rounded: {},
+          filled: {},
+          unstyled: {}
+        }
+      },
       Text: {
         baseStyle: {
           _light: {